通过集合的方式构建
class ListViewWidgetOne extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ListViewState();
}
}
class ListViewState extends State<ListViewWidgetOne> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
padding: EdgeInsets.all(8.0),
children: <Widget>[
Container(
color: Colors.amber[200],
height: 50,
child: Center(
child: Text("TestA"),
),
),
Container(
color: Colors.amber[300],
height: 50,
child: Center(
child: Text("TestB"),
),
),
Container(
child: Center(
child: Text("TestC"),
),
color: Colors.amber[400],
height: 50,
)
],
);
}
}
通过ListView.build()构建
class ListViewWidgetTwo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ListViewStateTwo();
}
}
class ListViewStateTwo extends State<ListViewWidgetTwo> {
final datas = ['A', 'B', "C"];
final colorsData = [200, 400, 600];
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: datas.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: 1),
height: 50,
child: Center(
child: Text(datas[index]),
),
color: Colors.amber[colorsData[index]],
);
});
}
}
通过ListView.separated()构建
class ListViewWidgetThree extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ListViewStateThree();
}
}
class ListViewStateThree extends State<ListViewWidgetThree> {
final datas = ['AAA', 'BBB', "CCC"];
final colorsData = [200, 400, 600];
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.separated(
itemBuilder: (context, index) {
return Container(
height: 50,
color: Colors.amber[colorsData[index]],
child: Center(
child: Text(datas[index]),
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(height: 1,),
itemCount: datas.length);
}
}
通过ListView.separated()构建的有分割线。