Flutter:如何向ListView添加标题行

116

我对Flutter非常陌生。 我已经能够利用HTTP请求获取数据,构建ListView,编辑其中一个列表中的行以及其他基础知识。 环境很好。

我设法组合了一个糟糕构造的ListView头部,但我知道这不正确。 我无法使标题文本正确对齐。

我发现Drawer类有一个DrawerHeader类,但是没有看到ListView有一个ListViewHeader

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Contacts'),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.add_circle),
                onPressed: getCustData
            ),
          ],
        ),
        //body:
        body: Column(
            children: <Widget>[
              Row(
                  children: <Widget>[
                    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

                ),
              ),
            ),
          ]
        )
    );
  }
}

谢谢。

输出屏幕截图


4
考虑使用 DataTable 类。 - Alex Semeniuk
根据提供的代码,您的标题有6个子元素(列标题),其中第一个和最后一个为空。第一个空标题元素由ListTile中的leading属性表示,但是没有相应的trailing属性来匹配第六个空标题列。因此,标题显示6个元素,但您的列表只使用5列(1个leading和具有4个子元素的title)。因此,添加trailing将有助于将它们对齐,但是使用带有leadingtrailing和具有4个元素的titleListItem使其完美;就像您在答案中所做的那样。 - Keith DC
12个回答

0

在这里我创建了flat_list小部件,其规格与React Native中的FlatList相似。

FlatList(
+  listHeaderWidget: const Header(),
  data: items.value,
  buildItem: (item, index) {
    var person = items.value[index];

    return ListItemView(person: person);
  },
),

0
一种选择是使用AppBar的bottom属性。例如,下面的代码将在两个远端列上方显示两个标题。
bottom: PreferredSize(
        preferredSize: const Size.fromHeight(16),
        child: Row(
          children: const [
            Spacer(),
            Text('Column1', style: TextStyle(fontSize: 8)),
            SizedBox(width: 24),
            Text('Column2', style: TextStyle(fontSize: 8)),
            SizedBox(width: 24),
          ],
        )),

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接