在一个listview.builder中使用两个数组的方法是什么

Question

我有两个数组，我想把它们放在一个Listview.builder中，这样它们就可以一起滚动了。(第一个数组项目出现，当你滚动更多时，你会到达第二个数组(，每个数组的项目之前都应该有一个标题。我试着把它们放在两个列表视图中，但屏幕被分割了，场景很可怕。

Answer 1

如果您对使用ListView.builder感兴趣

class ListTest2 extends StatelessWidget {
const ListTest2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final list1 = List.generate(4, (i) => "list1 i $i");
final list2 = List.generate(4, (i) => "list2 i $i");
final combineList = [...list1, ...list2];
return Scaffold(
body: ListView.builder(
itemCount: combineList.length,
itemBuilder: (context, index) {
if (index == 0 && list1.isNotEmpty) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("header of List 1"),
Text(combineList[index]),
],
);
}
if (index == list1.length && list2.isNotEmpty) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("header of List 2"),
Text(combineList[index]),
],
);
}
return Text(combineList[index]);
}),
);
}
}

或者你可以像一样

return Scaffold(
body: ListView(
children: [
Text("List1 header  "),
...list1.map((e) => Text(e)),
Text("List2 header "),
...list2.map((e) => Text(e)),
],
),
);

如果你喜欢忽略空箱的标题，

@override
Widget build(BuildContext context) {
final list1 = List.generate(4, (i) => "list1 i $i");
final list2 = List.generate(4, (i) => "list2 i $i");
return Scaffold(
body: ListView(
children: [
if (list1.isNotEmpty) Text("List1 header  "),
...list1.map((e) => Text(e)),
if (list2.isNotEmpty) Text("List2 header "),
...list2.map((e) => Text(e)),
],
),
);
}

Answer 2

在传递到ListView的children:之前，可以将数组组合成一个数组

ListView(
...
children: <Widget>[
Text("array1 header"),
...array1,
Text("array2 header"),
...array2,
],
...
)