我正在尋找一些指導來創建分隔符的列表視圖。例如,我想從按日期分組的數據庫中獲取消息,並按照日期將消息與某些圖形或行等分開,然後在分隔符下面顯示消息。試試這個撲動,任何指導或推動正確的方向將不勝感激。顫動組列表與分隔符
回答
我的設計的醜陋道歉,但只是爲了告訴你,你幾乎可以建立自己的設計,你的願望,這是一個簡單的例子:
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,),
],
)
],
),
);
雖然這可能並不適用於您的情況,一個簡單的方法來分隔添加到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')));
}
}
這看起來很有希望,如果我通過http調用得到我的消息列表,那麼我將它放在一個列表中,現在我使用listview。生成器併爲每個項目應用一個小部件,但是現在我需要一個按日期分割的日期,每個日期可以是1或多個。我現在正在嘗試做一個列表視圖,其中包含消息列表視圖,但是與大小錯誤對等。您的解決方案看起來更直接,接受日期所需的分隔符而不是每個分隔符。任何建議都會很棒。 – Robert
對於動態列表,不幸的是ListTile.divideTiles不會爲你工作。我建議使用aziza的建議,並在每行構建小部件時插入分隔符(或BoxDecoration)。我將更新一個不同的代碼片段來演示。 –
簡單地把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()
)
)
);
}
- 1. 解析列表與最小分隔符
- 2. 製表符分隔數組到numpy數組列表?
- 3. 分隔字符串與分隔符
- 4. SQL拆分製表符分隔列
- 5. 用分隔符分割列表
- 6. 顫動中的擴展面板列表
- 7. Howto分割泛型列表項與分隔符?
- 8. C#列表<string>與分隔符字符串
- 9. 顫動與JSON填充dropdownmenu
- 10. vb.net自動完成與分隔符
- 11. 拆分列分隔符R
- 12. GNU Make:如何加入列表並用分隔符分隔它?
- 13. 在Python中使用分隔符分隔列表
- 14. 數組項的逗號分隔列表
- 15. 擊:分割(多)字符串到數組與multichar分隔符
- 16. 如何更改列表的分隔符?
- 17. 刪除html表中的列分隔符
- 18. Flex平鋪列表的行分隔符
- 19. 添加分隔符來拼接列表
- 20. sqoop中使用的分隔符列表
- 21. ASP多選列表框分隔符
- 22. SharePoint列表/ Excel來在分隔符
- 23. 逗號分隔字符串列表
- 24. 文件和路徑列表分隔符:
- 25. C#:字符串拆分返回字符串列表和分隔符列表?
- 26. DecimalFormat沒有分組分隔符字符
- 27. 從分隔列表
- 28. 從製表符分隔的文本文件列製作數組
- 29. 如何使用多個分隔符在數組列表
- 30. 基於列值組合製表符分隔文件
謝謝,我認爲是足夠讓我從正確的方向開始。如果我一路卡住,我會發佈一個新項目。 – Robert
不要那樣做!使用'new Divider()'而不是灰色邊框...... – Darky
無論如何,我並不打算展示一個偉大的設計,是的Divider更好,但只是在這個特定的佈局中,它需要調整才能產生效果。我在最後添加了更改,如果我們使用Card而不是Container作爲父級,那麼這可能會是一個更好看的設計,但此示例僅用於表明您可以自定義自己的小部件。 – aziza