Question

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

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

我看到抽屉类有一个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

            ),
          ),
        ),
      ]
    )
);

} }

感谢。

Answer 1

通过itemBuilder返回标题作为第一行：

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 ...);
    },
);

Answer 2

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

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

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

所以...我将ListTile添加到第一个Body Column，一个带有backgroundColor透明的CircleAvatar，然后是我的4个标题的一行。

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

Answer 3

najeira的解决方案既简单又简单，但是您无需触摸索引即可获得相同且更灵活的结果。

您可以使用与列表视图功能相同的 CustomScrollView＆SliverList ，而不是使用listView。

   return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            // you could add any widget
            child: ListTile(
              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")),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => APIDetailView(data[index])),
                    );
                  },
                  child: ListTile(
                    //return  ListTile(
                    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"])),
                      ],
                    ),
                  ),
                );
              },
              childCount: data == null ? 0 : data.length,
            ),
          ),
        ],
      ),
    );

Answer 4

使用 DataTable 小部件！
该小部件允许您构建表格。 代码： DataTable(columns: [], rows: [],)

示例：

  DataTable(
   columns: [
     DataColumn(label: Text('Lang.')),
     DataColumn(label: Text('Year')),
   ],
   rows: [
     DataRow(cells: [DataCell(Text('Dart')), DataCell(Text('2010'))]),
     DataRow(cells: [DataCell(Text('Go')), DataCell(Text('2009'))]),
     DataRow(cells: [DataCell(Text('PHP')), DataCell(Text('1994'))]),
     DataRow(cells: [DataCell(Text('Java')), DataCell(Text('1995'))]),
   ],
)

输出：

您可以通过观看此 DataTable 或访问 official video

来了解有关 flutter.dev 的更多信息

Answer 5

您可以使用listview_utils包轻松将页眉和页脚附加到ListView，如下所示：

import 'package:listview_utils/listview_utils.dart';

CustomListView(
  header: Container(
    child: Text('Header'),
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index, _) {
    return ListTile(
      title: Text(item['title']),
    );
  },
);

Answer 6

<input type="checkbox" [(ngModel)] = "employee.skillsDictionary[skill]"

_MyAppState类扩展了状态{

1. you can add container and lisview in Column ,

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

Answer 7

在此代码示例中，我们正在执行如何在列表视图中添加节标题行。

class HeaderRowListView extends StatelessWidget {
  final List<int> _listData = List<int>.generate(100, (i) => i);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Header Row'),
      ),
      body: ListView(
        padding: EdgeInsets.all(8.0),
        children: _listData.map((i) {
          return i % 10 == 0
              ? Container(
            color: Colors.grey.withOpacity(.5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text("Header",
                    style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    )),
                Text("Feb 26th, 2019",
                    style: TextStyle(
                      fontSize: 14.0,
                      color: Colors.black45,
                    )),
              ],
            ),
            padding: EdgeInsets.all(10.0),
          )
              : ListTile(
            title: Text("Item $i"),
          );
        }).toList(),
      ),
    );
  }
}

Answer 8

您可以像这样将列添加到项目列表中的第一项

new ListView.builder
  (
    itemCount: litems.length,
    itemBuilder: (BuildContext ctxt, int index) {
     if(index==0)
{
return
Column(
children: <Widget>[
Header();
rowContent(index);
]
else{
return rowContent(index);
}
    }
  )

Answer 9

似乎您真正想要的是DataTable小部件而不是ListView。它具有可自定义的标题，其中包括排序选项。

阅读文档，其中包括关于api.flutter.dev的一些出色示例：Data Table CLass

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

9 个答案: