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

问题描述

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

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标题...但是我知道这是不对的.我无法使标题文本正确对齐.

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类具有DrawerHeader类，但是看不到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 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,))),
                  ]
              ),

} }

谢谢.

推荐答案

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

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

在第一个正文列中，我为Header使用了与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.

所以...我在第一个正文列中添加了一个ListTile，添加了一个backgroundColor为透明的CircleAvatar，然后在我的4个标题中添加了一行.

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.

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

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