带有分隔符的Flutter组ListView [英] Flutter group listviews with separator

问题描述

我正在寻找一些使用分隔符创建列表视图的指导.例如，我想从数据库中按日期分组消息，并用一些图形或线条等按日期将消息分开，然后将消息放在分隔符下.轻而易举地尝试此操作，并在正确的方向进行任何引导或推动，将不胜感激.

I am looking for some guidance to create listviews with separators. For instance, I would like to take messages from a DB grouped by date and separate the messages by date with some graphic or line, etc... and then have the messages under the separator. Trying this in flutter and any guidance or push in the right direction would be appreciated.

推荐答案

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

I apologize for the ugliness of the design, but just to show you, you can pretty much build your own design that you desire, this a quick example:

import "package:flutter/material.dart";
import 'package:meta/meta.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Test"),
      ),
      body: new ListView.builder(
        // itemCount: myData.lenght(),
          itemCount: 20,
          itemBuilder: (BuildContext context, int index) {
            //sort my data by timestamp before building
            return new CustomWidget(date: "Convert my time stamp to date",
              content: "My Awesome Content",
              trailingIconOne: new Icon(Icons.share, color: Colors.blueAccent,),
              trailingIconTwo: new Icon(
                Icons.favorite, color: Colors.redAccent,),);
          }),
    );
  }
}

class CustomWidget extends StatelessWidget {
  String date;
  String content;

  Icon trailingIconOne;

  Icon trailingIconTwo;

  CustomWidget(
      {@required this.date, @required this.content, @required this.trailingIconOne, @required this.trailingIconTwo});

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.grey[500])
      ),
      child: 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: () {})
            ],
          )
        ],
      ),
    );
  }
}

为了获得更好的设计，您可以摆脱边界，而使用Divider代替:

For a better design, you can get rid of the borders and use a Divider instead:

return new Container(
      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,),
            ],
          )
        ],
      ),

我认为更好的视觉解决方案是使用Card而不是Container

And a better visual solution in my opinion is to use a Card instead of Container,

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

这篇关于带有分隔符的Flutter组ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！