Flutter 带分隔符的颤振组列表视图

我正在寻找一些使用分隔符创建ListView的指导。例如，我想从一个按日期分组的数据库中获取消息，并用一些图形或线条将消息按日期分开，等等。。。然后将消息放在分隔符下。如果您能在颤振中尝试这一点，并在正确的方向上提供任何指导或推动，我们将不胜感激。

对于设计的丑陋，我深表歉意，但为了向您展示，您几乎可以构建自己想要的设计，这是一个简单的示例：

在我看来，更好的视觉解决方案是使用

卡片

而不是

容器

return new Card(
      child: new Column(
        children: <Widget>[
          new Column (children: <Widget>[
            new Container (child: new Text(date), color: Colors.yellow[200],),
            new Container(height: 15.0,),
            new Text(content),
            new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new IconButton(icon: trailingIconOne, onPressed: () {}),
                new Container(width: 10.0,),
                new IconButton(icon: trailingIconTwo, onPressed: () {}),
          ], ),

            //  new Divider(height: 15.0,color: Colors.red,),
            ],
          )
        ],
      ),
    );

退回新卡(
子：新列(
儿童：[
新栏目（儿童：[
新容器（子项：新文本（日期），颜色：Colors.yellow[200]，），
新货柜（高度：15.0，），
新文本（内容），
新行(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
新图标按钮（图标：trailingiconne，onPressed:（）{}），
新容器（宽度：10.0，），
新图标按钮（图标：trailingIconTwo，按下：（）{}），
], ),
//新分隔器（高度：15.0，颜色：Colors.red，），
],
)
],
),
);

虽然这可能不适用于您的情况，但向ListView添加分隔符的简单方法是使用

ListView.divideTiles

：

// Adapted from https://flutter.io/flutter-for-android/#listviews--adapters

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new ListExamplePage(),
    );
  }
}

class ListExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // https://docs.flutter.io/flutter/material/ListTile/divideTiles.html
    var dividedWidgetList = ListTile.divideTiles(
        context: context,
        tiles: _getListData(),
        color: Colors.black).toList();

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('List Example'),
      ),
      body: new ListView(children: dividedWidgetList)
    );
  }

  _getListData() {
    List<Widget> widgets = [];
    for (int i=0; i<100; i++) {
      widgets.add(
        new Padding(
            padding: new EdgeInsets.all(10.0),
            child: new Text('Row $i'))
      );
    }
    return widgets;
  }
}

//改编自https://flutter.io/flutter-for-android/#listviews--适配器
进口“包装：颤振/材料.省道”；
void main（）{
runApp（新的MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新建ListExamplePage（），
);
}
}
类ListExamplePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
// https://docs.flutter.io/flutter/material/ListTile/divideTiles.html
var dividedWidgetList=ListTile.divideTiles(
上下文：上下文，
平铺：_getListData（），
颜色：Colors.black）；
归还新脚手架(
appBar：新的appBar(
标题：新文本（“列表示例”），
),
正文：新列表视图（子项：dividedWidgetList）
);
}
_getListData（）{
列表小部件=[]；
对于（int i=0；i只需将
列表项
放入
容器
并添加装饰：

  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new ListTile(
          title: new Text('I have border')
        ),
        decoration:
            new BoxDecoration(
                border: new Border(
                    bottom: new BorderSide()
                )
            )
        );
  }

一个更干净、更简单的解决方案是使用以下方法

ListView.separated(
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)

这里有很多过于复杂的答案

只需使用divideTiles：

new ListView(
              children: ListTile.divideTiles(context: context, tiles:

或者，使用分离式：

new ListView.separated(
              itemCount: 25,
              separatorBuilder: (BuildContext context, int index) => Divider(),
              itemBuilder: (BuildContext context, int index) {

长话短说

只需使用
列
并添加
分隔符

ListView.builder(
      itemCount: count,
      itemBuilder: (context, int index) {return tile(index);},
    ),

为itemBuilder创建一个小部件

Widget tile(int index) {
return Column(
  children: <Widget>[
    // your widgets in listView
    Divider(),    //at last simply add divider
  ],
);

小部件磁贴（int索引）{
返回列(
儿童：[
//listView中的小部件
除法器（），//最后只需添加除法器
],
);

}
谢谢，我认为这足以让我朝着正确的方向开始。如果我在途中遇到困难，我会发布一个新项目。无论如何，我并不打算展示一个伟大的设计，是的，分隔符更好，但只是在这个特殊的布局中，它需要调整才能产生效果。我在最后添加了更改，可能会更好oking design如果我们使用卡片而不是容器作为父对象，但是这个示例只是为了显示您可以自定义自己的小部件。似乎我可以静态地完成这项工作，而不会出现问题，我需要看到的最佳方法是提取数据和排序。我是否提取日期，然后在每个小部件中的日期分隔符之后再提取m与该日期相关的消息，或者我是否提取所有数据并提取所需日期的数据。我已经按照日期顺序将其作为单个列表视图完成，但希望将特定日期的所有消息转换为在分隔符下方。想法？或者我应该在此处问另一个问题以获得答案？也许可以问另一个问题以使我t更清楚，一般来说，您希望在数据项本身中存储时间戳，我不确定这是否清晰。另一件事，如果您使用Firebase rtdb，如果您的数据获取是一层的，并且它提供了一个排序参数，您可以使用
FirebaseAnimatedList
而不是
ListView
利用。我正在使用mysql使用JSON字段存储数据，并为可搜索和可索引字段生成列，这是客户对DB的要求。在为该日期的消息列表视图构建小部件时，为唯一日期调用restapi，然后创建divider，然后调用数据可能同样容易。我将创建一个问题n如果我被阻止。再次感谢这看起来很有希望，如果我通过http调用获取我的消息列表，我将其放入列表中，现在我使用listview.builder并为每个项目应用一个小部件，但是现在我想要一个按日期划分的除法器，每个日期可以是1或多个。我正在尝试创建一个包含messag列表视图的除法器列表视图是的，但要解决大小错误等问题。您的解决方案看起来更简单，只接受日期所需的分隔符，而不是每个分隔符。任何建议都很好。对于动态列表，ListTile.divideTiles不幸不适合您。我建议按照aziza的建议插入分隔符（或框装饰）在按行构建小部件时。我将使用不同的代码段进行更新以进行演示。这更简洁、更易于理解，但它在最后一个元素的底部添加了边框。这不是正确的方法。@Tony不一定“不是正确的方法”。如果listtile是循环的，请检查是否为最后一个索引，而不是显示边框。如果手动执行listtile，则不要在最后一项上添加边框。另请参阅
ListView.separated(
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)

new ListView(
              children: ListTile.divideTiles(context: context, tiles:

new ListView.separated(
              itemCount: 25,
              separatorBuilder: (BuildContext context, int index) => Divider(),
              itemBuilder: (BuildContext context, int index) {

ListView.builder(
      itemCount: count,
      itemBuilder: (context, int index) {return tile(index);},
    ),

Widget tile(int index) {
return Column(
  children: <Widget>[
    // your widgets in listView
    Divider(),    //at last simply add divider
  ],
);