一尘不染

Flutter:如何将标题行添加到ListView

flutter

Flutter的新手。我已经能够利用HTTP请求获取数据,构建ListView,在该List中编辑行以及其他基础知识。优越的环境。

我设法拼凑了一个构造错误的ListView标头…但是我知道这是不对的。我无法使标题文本正确对齐。

我看到Drawer类具有DrawerHeader类,但是看不到ListView具有ListViewHeader。

  @override
  小部件build(BuildContext context){
    返回脚手架(
        appBar:AppBar(
          标题:文字(“联系人”),
          动作:[
            IconButton(icon:Icon(Icons.add_circle),
                onPressed:getCustData
            ),
          ],
        ),
        //身体:
        正文:列(
            儿童:[
              行(
                  儿童:[
                    Expanded(child:Text('',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                    Expanded(child:Text('First Name',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                    Expanded(child:Text('Last Name',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                    Expanded(child:Text('City',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                    Expanded(child:Text('Customer Id',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                    Expanded(child:Text('',style:TextStyle(height:3.0,fontSize:15.2,fontWeight:FontWeight.bold,))),
                  ]
              ),

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

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

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

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

                );
              }, //itemBuilder

            ),
          ),
        ),
      ]
    )
);

}}

谢谢。

在此处输入图片说明


阅读 842

收藏
2020-08-13

共1个答案

一尘不染

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

在第一个正文列中,我的标头使用了与标题相同的布局ListTile

因为ListTil在这种情况下,我的数据e包含a CircleAvatar,所以所有的水平间距都略微有点…
CircleAvatar呈现的5列…然后是4个均匀间隔的列。

所以…我添加了一个ListTile到第一主体Column,一个CircleAvatar具有backgroundColor透明的,然后Row我4个标题。

        ListTile(
        onTap: null,
        leading: CircleAvatar(
          backgroundColor: Colors.transparent,
        ),
        title: Row(
            children: <Widget>[
              Expanded(child: Text("First Name")),
              Expanded(child: Text("Last Name")),
              Expanded(child: Text("City")),
              Expanded(child: Text("Id")),
            ]
        ),
      ),

在此处输入图片说明

2020-08-13