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

【问题标题】：How to load multiple list view inside single list view?如何在单个列表视图中加载多个列表视图？
【发布时间】：2020-02-07 14:12:19
【问题描述】：

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

Video For clear my points

【问题讨论】：

也许你正在寻找SliverList

标签： json listview flutter scrollview

【解决方案1】：

这是您想要实现的目标的示例：

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"]]);
              });
            },
          );
        }),
  );
}

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

【讨论】：

谢谢巴勃罗·巴雷拉，您能否也说明一下“加载更多”的工作原理？
再次感谢 Pablo Barrera，这个答案拯救了我的日子。

【解决方案2】：

难道不是在另一个listview 中显示每个listview，而是在SingleChildScrollView 中显示所有listviews，然后将所有listviews 添加到row 小部件。

SingleChildScrollView(
   child: Column(
      children<widget>[
         // Put listviews here.
      ],
   ),
),

【讨论】：

谢谢#Thor，您能否也说明一下“加载更多”的工作原理？
如果我理解正确，您希望在所有列表下方都有一个按钮吗？为此，我只需将按钮放在列中 children 的列表下方。