Flutter：我可以向ListView添加 Headers 行吗？-Java 学习之路

对Flutter来说很新 . 我已经能够利用HTTP请求数据，构建ListView，编辑该列表中的行和其他基础知识 . 环境优美 .

我已经设法将一个构造糟糕的Header拼凑成一个ListView ......但我知道这是不对的 . 我无法正确排列Header文本 .

我看到Drawer类有一个DrawerHeader类，但是看不到ListView有一个ListViewHeader .

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Contacts'),
          actions: [
            new IconButton(icon: new Icon(Icons.add_circle),
                onPressed: getCustData
            ),
          ],
        ),
        //body:
        body: new Column(
            children: [
              new Row(
                  children: [
                    new Expanded(child: new Text('', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    new Expanded(child: new Text('First Name', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    new Expanded(child: new Text('Last Name', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    new Expanded(child: new Text('City', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    new Expanded(child: new Text('Customer Id', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    new Expanded(child: new Text('', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                  ]
              ), 

          new Expanded(child:Container(
            child: ListView.builder(

              itemCount: data == null ? 0 : data.length,
              itemBuilder: (BuildContext context, int index) {

                return new InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new APIDetailView(data[index])),
                    );
                  },

                  child: new ListTile(                //return new ListTile(
                      onTap: null,
                      leading: new CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: new Text(data[index]["FirstName"][0]),
                      ),
                      title: new Row(
                          children: <Widget>[
                            new Expanded(child: new Text(data[index]["FirstName"])),
                            new Expanded(child: new Text(data[index]["LastName"])),
                            new Expanded(child: new Text(data[index]["Bill_City"])),
                            new Expanded(child: new Text(data[index]["Customer_Id"])),
                          ]
                      )
                  ),

                );
              }, //itemBuilder

            ),
          ),
        ),
      ]
    )
);

}}

谢谢 .

enter image description here

2 回答

将itemBuilder作为第一行返回 Headers ：

ListView.builder(
    itemCount: data == null ? 1 : data.length + 1,
    itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
            // return the header
            return new Column(...);
        }
        index -= 1;

        // return row
        var row = data[index];
        return new InkWell(... with row ...);
    },
);

回复于 2024-04-30T13:11:48+08:00

5
这就是我解决这个问题的方法 . 感谢najeira让我考虑其他解决方案 .

在第一个正文列中，我使用了与我用于ListTile的Header相同的布局 .

因为我的数据ListTile，在这种情况下，包括一个CircleAvatar，所有的水平间距都有点......有5列，其中CircleAvatar被渲染...然后是4个均匀间隔的列 .

所以...我将ListTile添加到第一个体柱，一个带有透明backgroundColor的CircleAvatar，然后是我的4个 Headers 的一行 .
```
new ListTile(
        onTap: null,
        leading: new CircleAvatar(
          backgroundColor: Colors.transparent,
        ),
        title: Row(
            children: <Widget>[
              new Expanded(child: new Text("First Name")),
              new Expanded(child: new Text("Last Name")),
              new Expanded(child: new Text("City")),
              new Expanded(child: new Text("Id")),
            ]
        ),
      ),
```
回复于 2024-04-30T13:11:48+08:00

Flutter：我可以向ListView添加 Headers 行吗？

2 回答

相关问题