android - Flutter:如何在代码中的每个列表项之间添加分隔符?
问题描述
如何在列表中添加分隔符?我使用 Flutter for Android。我想在每个列表项之间添加一个分隔线,并且我想为分隔线着色并添加样式。
我尝试添加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,
),
);
}
}
解决方案
有很多方法可以做同样的事情。让我在这里比较一下。
对于一个简短的静态列表
利用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();
},
)
这将为每个项目返回两个小部件,最后一个项目除外。separatorBuilder
用于添加分隔符。
在最后一项之后添加分隔线
创建一个使用 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
],
);
},
);
}
使用 BoxDecoration
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]),
),
);
},
);
}
推荐阅读
- regex - 带有日期的 dir 的正则表达式匹配不会产生 $1、$2、$3 的结果
- ruby-on-rails - Rspec断言两个sql查询相同
- python - Pandas groupby和区间内的累积总和
- java - 仅当两次找到相同的字符串时才匹配正则表达式
- yaml - terraform kubernetes 提供程序的多行字符串注释
- javascript - 如何导入基于承诺的变量以在另一个模块(javascript)中使用?
- django - 在 django 中传递参数
- jquery - 使用父选择器上的通配符从子代获取 JQuery 更改事件
- javascript - Node Express.js 从 json 数据中删除一个条目
- java - 如何在 jaxb 中使毫秒可选?