如何在可扩展列表中显示数据在flutter中查看

Question

我想在flutter中的可扩展列表视图中显示数据。。。例如，我需要下面的列表作为listView的标题。。。天=["周一"、"周二"、"周三"]。。。。。以及基于天列表中的日期进行扩展。。。。以下数据在同一天被填充。

List<Cars> dummyData = [
Cars(
model: 'Fiat',
speed: '100',
day: 'Monday',
),
Cars(
model: 'Maruti',
speed: '120',
day: 'Monday',
),
Cars(
model: 'Hyundai',
speed: '130',
day: 'Tuesday',
),
Cars(
model: 'Toyota',
speed: '140',
day: 'Wednesday',
),
]

如果你需要我方的任何补充信息，请告诉我。

Answer 1

您可以使用expantionFile小部件来实现。

以下代码可能会对您有所帮助。

class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
@override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
List<String> _days = ['sunday', 'Monday', 'Tuesday'];
List<Cars> dummyData = [
Cars(
model: 'Fiat',
speed: '100',
day: 'Monday',
),
Cars(
model: 'Maruti',
speed: '120',
day: 'Monday',
),
Cars(
model: 'Hyundai',
speed: '130',
day: 'Tuesday',
),
Cars(
model: 'Toyota',
speed: '140',
day: 'Wednesday',
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: ListView.builder(
itemCount: _days.length,
itemBuilder: (_, index) {
return ExpansionTile(
title: Text(_days[index].toString()),
children: [
...dummyData.map((e) {
if (e.day == _days[index]) {
return Text(e.speed.toString());
}
return Container();
}).toList(),
]);
},
),
),
);
}
}
class Cars {
String model;
String speed;
String day;
Cars({this.model, this.day, this.speed});
}

Answer 2

首先按照如下方式重新组织数据：

final organizedData = new HashMap<String, List<Car>>();
for(final car in dummyData){
if(!organizedData[car.day]){
organizedData[car.day] = new List<Car>();
organizedData[car.day].add(car);
}else{
organizedData[car.day].add(car);
}
}

通过这样做，您将在地图中按每天对汽车进行分组，例如，organizedData["Monday"]将包含两辆汽车的列表，依此类推

现在，用一个可扩展的小部件将所有这些放在ListView中，可能是这样的：

Widget expandableList() {
return ListView.builder(
itemCount: organizedData.length,
itemBuilder: (context, index) {
String day = organizedData.keys.elementAt(index);
return Card(
child: ExpandablePanel(
header: day,
collapsed: Text('some text', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
expanded: Card(
child: Row(
children: carsUI(organizedData[day]),
),
tapHeaderToExpand: true,
hasIcon: true,
),
);
},
);
}
List<Widget> carsUI(List<Car> cars){
final ui = cars.map((car){
return Text(car.speed + ", " + car.model);
}).toList();
return ui;
}

我希望它能有所帮助。

Answer 3

您可以使用ListView.builder((小部件来渲染动态列表，这种方法是一种有效的方法。

ListView.builder(
itemCount: dummyData.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Column(
children: <Widget>[
Text(dummyData[index].model),
Text(dummyData[index].day),
]
),
trailing: Text(dummyData[index].speed)
)
}
)