将两个 ListView 合并为一个
Posted
技术标签:
【中文标题】将两个 ListView 合并为一个【英文标题】：Joining two ListViews into one in flutter 【发布时间】：2020-08-09 10:58:08 【问题描述】：我必须列出我的颤振项目中的项目，我需要使用 2 ListView 一个接一个地查看它们，这里有更多详细信息：
列表
List<List<theLineModel.Line>> moreThenOneLineList = [];
List<Station> mutualStationsList = [];
List<theLineModel.Line> oneLineList = [];
小部件
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: oneLineList.map((line)
return GestureDetector(
onTap: ()
Navigator.pushNamed(
context, '/line_details',
arguments:
'line': line,
'oneLine': true,
);
,
child: Card(
color: Colors.deepPurple,
elevation: 8,
child: Padding(
padding:
const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Text(
"$line
.transportationType",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$line.startStation
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Icon(
Icons.arrow_downward,
color: Colors.white,
size: 30,
)
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$line.endStation
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Text(
"$line.price $S
.of(context)
.le",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
Text(
"$line.notes",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
],
),
),
),
);
).toList(),
),
),
Expanded(
child: ListView(
children: moreThenOneLineList
.map((lineList)
return GestureDetector(
onTap: () ,
child: Card(
color: Colors.blueAccent,
elevation: 8,
child: Padding(
padding:
const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Text(
"$lineList[0]
.transportationType",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$chosenStations[0]
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Icon(
Icons.arrow_downward,
color: Colors.white,
size: 30,
)
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$mutualStationsList[moreThenOneLineList
.indexOf(
lineList)]
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Text(
"$lineList[0]
.price $S
.of(context)
.le",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
Text(
"$lineList[0]
.notes",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Icon(
Icons.arrow_downward,
color: Colors.white,
size: 30,
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Text(
"$lineList[1]
.transportationType",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$mutualStationsList[moreThenOneLineList
.indexOf(
lineList)]
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Icon(
Icons.arrow_downward,
color: Colors.white,
size: 30,
)
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
Text(
"$chosenStations[1]
.stationName",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Text(
"$lineList[1]
.price $S
.of(context)
.le",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
Text(
"$lineList[1]
.notes",
style: TextStyle(
color:
Colors.white,
fontSize: 20),
),
],
),
],
),
),
),
);
).toList(),
),
),
],
),
然后，由于两个列表都已添加到不同的ListView，因此导致最后出现空间和外观不佳的页面，请检查图像。
那么，知道如何将两个列表添加到单个 Listview 中吗？
【问题讨论】：
【参考方案1】：您可以将两个Lists 合并为一个ListView，如下所示：
Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: ListView(
children: list1//list1 is a dummy list of String I created for demonstration
.map(
(listElement) => Text(//return your own widget instead of this
listElement,
style:
TextStyle(fontSize: 40, color: Colors.cyanAccent),
),
)
.toList()
..addAll(
list2.map(//list2 also is a dummy list of String I created for demonstration
(listElement) => Text(//return your own widget instead of this
listElement,
style: TextStyle(
fontSize: 40, color: Colors.cyanAccent),
),
),
),
),
),
],
),
),
【讨论】：
【参考方案2】：这是使列表视图更灵活的另一种方法：DartPad
使用...List连接多列表：
Widget build(BuildContext context)
// Demo listview items
List<String> list1 = [for (int i=0; i < 30;i++) i.toString()];
List<String> list2 = [for (int i=30; i < 50;i++) i.toString()];
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: ListView(
children:[
// Some widgets here
const Text('List1'),
// list1 here
...list1.map((String text) => Text(text)).toList(),
// Some widgets between them
const Text('List2'),
// list2 here
...list2.map((String text) => Text(text)).toList(),
],),
),
],
),
);
【讨论】：
以上是关于将两个 ListView 合并为一个的主要内容，如果未能解决你的问题，请参考以下文章