Question

我正在使用flutter应用程序，我要在其中显示供稿，我想显示具有4个锻炼的第一列表（水平列表），具有4个帖子的第二列表（垂直列表），具有4个帖子的第三列表（水平列表）教练和第4名再次列出4个帖子。列表末尾有“加载更多”按钮，再次单击该按钮后，重复第一步，即4个锻炼，4个帖子，4个教练和4个帖子。我的问题是显示这种视图的最佳方法是什么。

Video For clear my points

Answer 1

您不能，而不是显示另一个selectedId中的每个Ids，而是将其全部显示在selectedIds中，然后将所有foreach (var sID in selectedId) { var product = productsList.First(x => x.id == sID); products.Add(product); }添加到listview小部件。

listview

Answer 2

以下是您要实现的目标的一个示例：

List<List<String>> lists = [["A1","A2","A3","A4","A5"],["B1","B2","B3"],["C1","C2","C3","C4","C5"],["D1","D2","D3"]];

Widget buildCard(String text) {
  return Container(
    margin: EdgeInsets.all(4.0),
    padding: EdgeInsets.all(40.0),
    alignment: Alignment.center,
    color: Colors.lightGreenAccent,
    child: Text(text),
  );
}

Widget buildHorizontalList(List<String> sublist) {
  return SizedBox(
    height: 200.0,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: sublist.length,
      itemBuilder: (context, index) => buildCard("${sublist[index]}"),
    ),
  );
}

Widget buildVerticalList(List<String> sublist) {
  return ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemCount: sublist.length,
    itemBuilder: (context, index) {
      return buildCard("${sublist[index]}");
    },
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.builder(
        itemCount: lists.length + 1,
        itemBuilder: (context, index) {
          if (index <= lists.length - 1) {
            return index.isEven ? buildHorizontalList(lists[index]) : buildVerticalList(lists[index]);
          }
          return RaisedButton(
            child: Text('Load More'),
            onPressed: () {
              setState(() {
                lists.addAll([["X1","X2","X3","X4","X5"],["Y1","Y2","Y3"]]);
              });
            },
          );
        }),
  );
}

编辑：我添加了“加载更多”按钮功能，基本上该按钮只是更新了“列表”变量（包含所有子列表的列表）。然后根据“列表”内容构建ListView。

如何在单个列表视图中加载多个列表视图？

2 个答案: