Flutter:如何将标题行添加到 ListView [英] Flutter : How to add a Header Row to a ListView

问题描述

对 Flutter 非常陌生.我已经能够利用 HTTP 请求数据、构建 ListView、编辑该 List 中的 Row 以及其他基础知识.环境优美.

Very new to Flutter. I've been able to utilize HTTP requests for data, build a ListView, edit a Row in that List and other basics. Excellent environment.

我已经设法为 ListView 拼凑了一个结构糟糕的 Header...但我知道这是不对的.我无法让标题文本正确排列.

I've managed to cobble together a badly constructed Header for a ListView... but I know this isn't right. I can't get the Header text to line up properly.

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

I see that the Drawer Class has a DrawerHeader Class, but can't see that ListView has a ListViewHeader.

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

}}

谢谢.

推荐答案

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

Here's how I solved this. Thanks @najeira for getting me thinking about other solutions.

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

In the first body Column I used the same layout for my Header that I used for the ListTile.

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

Because my data ListTile, in this case, includes a CircleAvatar, all the horizontal spacing is off a bit... 5 columns where the CircleAvatar is rendered... then 4 evenly spaced columns.

所以...我在第一个主体 Column 中添加了一个 ListTile，一个带有 backgroundColor 的 CircleAvatar透明的，然后是我的 4 个标题的 Row.

So... I added a ListTile to the first body Column, a CircleAvatar with a backgroundColor of transparent, and then a Row of my 4 Headings.

        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")),
            ]
        ),
      ),

这篇关于Flutter:如何将标题行添加到 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！