Question

我正在使用ListView.Builder来显示我的数据。在此上方是一个我创建的应用栏，其中包含正在显示的数据的标题。如何将数据和标题在不同设备上对齐？还是我要解决这个错误？感谢您的帮助！

这就是我需要的样子。设备的大小明显不同，因此在不同的设备上标题和下面的数据未对齐

这是呈现应用栏的代码，包括标题及其上方的所有其他内容。

class FuelAppBar extends StatelessWidget implements PreferredSizeWidget {
  final AppBar appBar;

  const FuelAppBar({Key key, this.appBar}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: Column(children: <Widget>[
          Flexible(
            flex: 2,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.blue, Colors.black],
                          begin: Alignment.topRight,
                          end: Alignment.topLeft,
                          stops: [0.2, 1])),
                    child: Container(
                      margin: EdgeInsets.only(left: 11),
                      child: Text(
                      "Fuel Assistance",
                      style: TextStyle(color: Colors.white, fontSize: 27, fontFamily: 'Montserrat', height: 1.1),
                    ),
        ),
                )
              ],
            ),
          ),
          Flexible(
            flex: 2,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  margin: EdgeInsets.only(left: 10),
                  child: Text(
                    "Q2 2020",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 25),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  alignment: Alignment.topRight,
                  child: Text(
                    "Not Submitted",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 25),
                  ),
                ),
              ],
            ),
          ),
          Flexible(
            flex: 1,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,//ROW 2
              children: [
            Container(
              child: FlatButton(
                padding: EdgeInsets.only(left: 12),
                shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => QuarterPage())
                    );
                  },
              child: Text(
                "Change Quarter", style: TextStyle(color: Colors.blue, fontFamily: 'Montserrat', height: 1.1),
              ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(right: 10),
              child: Text(
                "Status", style: TextStyle(color: Colors.blue, fontFamily: 'Montserrat', height: 1.1),
              ),
            )
          ])),
        Flexible(
          flex: 2,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                margin: EdgeInsets.only(left: 13, top: 12),
                child: Text(
                  "Date", style: TextStyle(color: Colors.green, fontFamily: 'Montserrat'),
                ),
              ),
              Container(
                margin: EdgeInsets.only(right: 135, top: 12),
                child: Text(
                  "Location", style: TextStyle(color: Colors.green, fontFamily: 'Montserrat'),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 12, right: 15),
                child: Text(
                  "Amount", style: TextStyle(color: Colors.green, fontFamily: 'Montserrat'),
                ),
              ),
            ])),
        ]));
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

这是在ListView.Builder中呈现数据的代码

class FuelAssistance extends StatefulWidget {
  @override
  _FuelAssistanceState createState() => _FuelAssistanceState();
}

class _FuelAssistanceState extends State<FuelAssistance> {
  static const Color greycolor = Color.fromRGBO(220, 220, 220, 10);
  Future<List<Fuel>> _future;

  @override
  void initState() {
    super.initState();
    _future = getFuel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(95.0),
        child: AppBar(
          automaticallyImplyLeading: false, // hides leading widget
          flexibleSpace: FuelAppBar(),
        ),
      ),
      body: FutureBuilder<List<Fuel>>(
        future: _future,
        builder: (context, AsyncSnapshot<List<Fuel>> snapshot) {
          switch (snapshot.connectionState) {
          case ConnectionState.none:
          return Text('none');
          case ConnectionState.waiting:
          return Center(child: CircularProgressIndicator());
          case ConnectionState.active:
          return Text('');
          case ConnectionState.done:
          if (snapshot.hasError) {
          print(
          '${snapshot.error}',
          );
          }
          }
      List fuel = snapshot.data;
        return ListView.builder(
          itemCount: fuel.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
              child: Card(
                color: (index % 2 == 0) ? greycolor : Colors.white,
                child: Container(
                    height: 60,
                    padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: Row(
                      children: <Widget>[
                        Flexible(
                          flex: 1,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(left: 4),
                                child: Text(fuel[index].date,
                                    style: TextStyle(fontSize: 14),
                                    textAlign: TextAlign.left),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Padding(
                                  padding: EdgeInsets.only(left: 10),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Text(fuel[index].title,
                                          style: TextStyle(
                                              fontSize: 15,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                              fontFamily: 'Montserrat'),
                                          textAlign: TextAlign.center)
                                    ],
                                  )),
                            ],
                          ),),
                        Expanded(
                          flex: 1,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(right: 14),
                                child: Text('\$${fuel[index].amount}',
                                    style: TextStyle(fontSize: 17,
                                    color: Colors.black),
                                    textAlign: TextAlign.right),
                              ),
                            ],
                          ),
                        ),
                      ],
                    )),
              ),
            );
          },
        );
        }
    ));
  }
}

Answer 1

ListTile(
    leading: Text("Mark"),
    title: Text("name"),
    subtitle: Text("Second Name"),
);

如何保留来自ListView.Builder的数据以及位于其上方的数据栏标题所在的Appbar？

1 个答案: