颤动组列表与分隔符

Question

我正在寻找一些指导来创建分隔符的列表视图。例如，我想从按日期分组的数据库中获取消息，并按照日期将消息与某些图形或行等分开，然后在分隔符下面显示消息。试试这个扑动，任何指导或推动正确的方向将不胜感激。

Answer 1

我的设计的丑陋道歉，但只是为了告诉你，你几乎可以建立自己的设计，你的愿望，这是一个简单的例子：

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来代替：

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，

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

Answer 2

虽然这可能并不适用于您的情况，一个简单的方法来分隔添加到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; 
    } 
} 

编辑：

对于动态生成列表，ListTile.divideTiles不是正确的选择。在其中列表项目建成阶段添加分隔可能是最好的一段路要走：

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) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text('List Example'), 
     ), 
     body: new ListView.builder(
      itemBuilder: (BuildContext context, int position) => 
       // Try using either _getRowWithDivider or _getRowWithBoxDecoration 
       // for two different ways of rendering a divider 
       _getRowWithDivider(position), 
     )); 
    } 

    /// Returns the widget at position i in the list, separated using a divider 
    Widget _getRowWithDivider(int i) { 
    var children = <Widget>[ 
     new Padding(padding: new EdgeInsets.all(10.0), child: new Text('Row $i')), 
     new Divider(height: 5.0), 
    ]; 

    return new Column(
     crossAxisAlignment: CrossAxisAlignment.start, 
     children: children, 
    ); 
    } 

// Returns the widget at position i in the list, separated using a BoxDecoration 
    Widget _getRowWithBoxDecoration(int i) { 
    return new Container(
     decoration: new BoxDecoration(
      border: 
       new Border(bottom: new BorderSide(color: Colors.grey[100]))), 
     child: new Padding(
      padding: new EdgeInsets.all(10.0), child: new Text('Row $i'))); 
    } 
} 

Answer 3

简单地把ListItem为Container，并添加装饰：

@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() 
       ) 
      ) 
     ); 
    }