使用分隔符的颤振组列表视图

概述我正在寻找一些指导用分隔符创建列表视图.例如,我想从按日期分组的数据库中获取消息,并按日期将消息与某些图形或行等分开……然后将消息放在分隔符下.尝试这一点,在任何指导或推动正确的方向,将不胜感激. 我为设计的丑陋而道歉,但为了向您展示,您可以构建自己想要的设计,这是一个简单的例子： import "package:flutter/material.dart";import 'package:me 我正在寻找一些指导用分隔符创建列表视图.例如,我想从按日期分组的数据库中获取消息,并按日期将消息与某些图形或行等分开……然后将消息放在分隔符下.尝试这一点,在任何指导或推动正确的方向,将不胜感激.解决方法 我为设计的丑陋而道歉,但为了向您展示,您可以构建自己想要的设计,这是一个简单的例子：

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: () {})            ],)        ],);  }}

为了更好的设计,您可以摆脱边框并使用分隔符：

return new Container(      child: new Column(        children: <Widget>[          new Column (children: <Widget>[            new Container (child: new Text(date),new Row(              mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[                new Iconbutton(icon: trailingIconOne,],new divIDer(height: 15.0,color: colors.red,

在我看来,更好的视觉解决方案是使用卡而不是容器,

return new Card(      child: new Column(        children: <Widget>[          new Column (children: <Widget>[            new Container (child: new Text(date),//  new divIDer(height: 15.0,);

总结

以上是内存溢出为你收集整理的使用分隔符的颤振组列表视图全部内容，希望文章能够帮你解决使用分隔符的颤振组列表视图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。