颤动: 如何在代码中的每个列表项之间添加分隔符？

如何向列表添加分隔符？我使用 Flutter for Android。我想在每个 List 项之间添加一个分隔符，我想给分隔符着色并添加样式。

我尝试加入 new divider();，但我得到了错误。我也尝试了 return new divider();。

下面是我的应用程序的屏幕截图:

我的原则是:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';


void main() => runApp(const MyApp());


class MyApp extends StatelessWidget {
const MyApp();


@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,


buttonTheme: const ButtonThemeData(
textTheme: ButtonTextTheme.primary,
)
),
home: const MyHomePage(),
);
}
}


class Kitten {
const Kitten({this.name, this.description, this.age, this.imageurl});


final String name;
final String description;
final int age;
final String imageurl;
}


final List<Kitten> _kittens = <Kitten>[
Kitten(
name: "kitchen",
description: "mehraboon",
age: 2,
imageurl:
"https://images.pexels.com/photos/104827/cat-pet-animal-domestic-
104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "garage",
description: "khashen",
age: 1,
imageurl:
"https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "bedroom",
description: "khar zoor",
age: 5,
imageurl:
"https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "living room",
description: "chorto",
age: 3,
imageurl:
"https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
];


class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);


Widget _dialogBuilder(BuildContext context, Kitten kitten) {
return SimpleDialog(contentPadding: EdgeInsets.zero, children: [
Image.network(kitten.imageurl, fit: BoxFit.fill),
Padding(
padding: const EdgeInsets.all(16.0),
child:
Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Text(kitten.name),
Text('${kitten.age}'),
SizedBox(
height: 16.0,
),
Text(kitten.description),
Align(
alignment: Alignment.centerRight,
child: Wrap(
children: [
FlatButton(onPressed: () {}, child: const
Text("noooo!"),color: Colors.red,),
Padding(padding: const EdgeInsets.all(2.0),),
RaisedButton(onPressed: () {}, child: const
Text("yesss!"),color: Colors.green)
],
),
)
]))
]);
}


Widget _listItemBuilder(BuildContext context, int index) {
return new GestureDetector(


onTap: () => showDialog(
context: context,
builder: (context) => _dialogBuilder(context, _kittens[index])),
child:
Container(


padding: EdgeInsets.all( 16.0),
alignment: Alignment.centerLeft,
child: Text(_kittens[index].name,
style: Theme.of(context).textTheme.headline),


),




) ;


}


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Keys"),
centerTitle: true,




),
body: ListView.builder(
itemCount: _kittens.length,
itemExtent: 60.0,
itemBuilder: _listItemBuilder,


),
);
}
}
147358 次浏览
小开

在 颤振开始教程上，他们提供的解决方案是这样的:

  body: ListView.builder(
itemCount: _kittens.length,
itemExtent: 60.0,
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider(color: Colors.purple); // notice color is added to style divider


return _listItemBuilder();
},
),
...

这应该添加分隔符，同时考虑到奇数和偶数行。

还要着色的分隔符“颜色”到 分隔类:

new Divider(color: Colors.purple);
小开

将小部件放入容器中，并将 BoxDecation 设置为

Container(
child: YourWidgetHere(),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black26))),
);
小开

看看这个问题: Builder 应该允许客户端指定分隔符 它明确表示:

  1. 如果您需要使用动态元素构建列表，那么现在您必须自己处理这个问题。我建议在构建行小部件时，在底部包含一个带有列或其他内容的 列出除法器，但最后一个除外(您可以测试 index == listData.length - 1)。

  2. 但是，如果像在示例中一样，您事先已经知道所有的列表数据，或者不使用 ListView.builder构建列表数据，那么您可以并且应该使用命名构造函数 ListView.divideTiles

小开

最正确的方法是使用 分离

ListView.separated(
itemCount: 25,
separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('item $index'),
);
},
);
小开
最佳答案

有很多方法可以做同样的事情。让我在这里比较一下。

一个简短的静态列表

使用 ListTile.divideTiles

ListView(
children: ListTile.divideTiles( //          <-- ListTile.divideTiles
context: context,
tiles: [
ListTile(
title: Text('Horse'),
),
ListTile(
title: Text('Cow'),
),
ListTile(
title: Text('Camel'),
),
ListTile(
title: Text('Sheep'),
),
ListTile(
title: Text('Goat'),
),
]
).toList(),
)

一个长的动态列表

使用 ListView.separated。

ListView.separated(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('$index sheep'),
);
},
separatorBuilder: (context, index) {
return Divider();
},
)

这将为除最后一个项目外的每个项目返回两个小部件。

用于在最后一项之后添加分隔符

创建一个使用 Divider 或 BoxDecoration 的自定义项小部件。

使用除法器

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];


@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ListTile(
title: Text(items[index]),
),
Divider(), //                           <-- Divider
],
);
},
);
}

使用盒子装饰

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];


@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration( //                    <-- BoxDecoration
border: Border(bottom: BorderSide()),
),
child: ListTile(
title: Text(items[index]),
),
);
},
);
}

Divider 和 BoxDecoration 都可以根据线条高度和颜色进行定制。Divider 也有一个缩进选项，但是您可以让 BoxDecoration 使用一些填充来做同样的事情。

为了更有格调

使用信用卡

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];


@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Card( //                           <-- Card
child: ListTile(
title: Text(items[index]),
),
);
},
);
}
小开

在 这个之后添加分隔符() :

         Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Image.network(video["imageUrl"]),
Container(
height: 6.0,
),
Text(
video["name"],
textScaleFactor: 1.05,
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Divider(
color: Theme.of(context).primaryColor,
)
],
);
小开

这是使用容器的另一种方式。

 ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
),
Container(height: 1, color: Colors.grey), //divider
ListTile(
leading: Icon(Icons.logout),
title: Text('Logout'),
),
小开

Dart 2.3

另一种方法，特别是对于通用的非列表视图: 在 Collection (链接)中使用 ...扩展运算符

Column(
children: [
for(var i=0; i<4; i+=1)
...[Container(height: 100, width: 100),
Divider()
]])
小开

像这样创建一个容器

Container(height: 1, color: Colors.grey),

然后像这样添加 ListTile

 ListView.builder(
itemCount: _feed.items.length,
itemBuilder: (BuildContext context, int index) {
final item = _feed.items[index];


return  Column(
children: <Widget>[
Container(height: 1, color: Colors.grey),  //Container for devider
ListTile(                                  //Your tile item
title: title(item.title),
subtitle: subtitle(item.pubDate),
leading: thumbnail(item.enclosure.url),
trailing: rightIcon(),
contentPadding: EdgeInsets.all(5.0),
onTap: () => openFeed(item.link),
)]);
},
);

现在您可以在我的屏幕截图中看到最终输出

enter image description here 返回文章页面【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟科普】【一分钟 https://i.stack.imgur.com/ezuig.jpg 】

小开

这个问题假设我们可以访问 material.dart来进行 Android 样式化(ListTile和 Divider)。如果你想要库比蒂诺的风格，我们可以:

  1. 对该行使用 Column视图包装器，并添加高度为1的 Container。

     Column(
children: <Widget>[
row, // A custom Row
Padding(
padding: const EdgeInsets.only(
left: 16,  // Adjust separator left padding.
right: 16, // Adjust separator right padding.
),
child: Container(
height: 1,
color: Styles.productRowDivider, // Custom style
),
),
],
);

  2. 在 cupertino.dart中没有 Divider。我们可以使用与 ListView.separated相同的 Container技术:

     ListView.separated(
itemCount: 100,
itemBuilder: (context, index) {
return row;
},
separatorBuilder: (context, index) {
return Container(
height: 1,
color: Styles.productRowDivider, // Custom style
);
},
);
小开

最近我用这个代码来设置除法器:

ListView.separated(
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("Hello", style: TextStyle(
color: Theme
.of(context)
.primaryColor
),),


);
},
separatorBuilder: (context, index) =>Divider(height: 1, color: Colors.green),
itemCount: 30),

而且成功了。

例如，我已经添加了我的应用程序的屏幕截图

enter image description here


提交答案