单个颤振屏幕上的两个列表答案

【问题标题】：Two list on a single flutter screen单个颤振屏幕上的两个列表
【发布时间】：2019-10-04 00:45:02
【问题描述】：

我是 Flutter 的新手，所以我试图将两个不同的 Flutter 示例合并到一个屏幕中。

我的意思是我希望能够有一个垂直的 gridView (https://flutter.dev/docs/cookbook/lists/grid-lists)，然后我想在它下面插入一个水平列表 (https://flutter.dev/docs/cookbook/lists/horizontal-list)。我尝试将两者都插入到小部件列表中，但这根本没有任何作用。

你能给我一些建议吗？

【问题讨论】：

标签： android flutter dart

【解决方案1】：

我假设您将GridView 和Horizontal List 正确声明和初始化为grid 和list。您可以做的是创建一个 ListView，如下所示：

Widget buildBody() {
return ListView(
  padding: EdgeInsets.all(8),
  children: <Widget>[
    grid,
    list
  ],
);
}

然后你可以在这里初始化脚手架时调用它：

return Scaffold(
  appBar: AppBar(
    title: Text('AppBar'),
  ),
  body: buildBody(),
);

要在 GridView 和 Horizontal List 之间添加空格，只需在 ListView 中的它们之间添加一个 Padding 小部件。

【讨论】：

【解决方案2】：

如果您正在寻找一个列表和网格以在单个屏幕中一起滚动。我建议你看看SliverList & SliverGrid。 https://www.youtube.com/watch?v=ORiTTaVY6mM

基本例子是

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Slivers'),
      ),
      body: _buildSlivers(),
    );
  }

  Widget _buildSlivers() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverGrid.count(
          crossAxisCount: 3,
          children: _gridItems(),
        ),
        SliverList(delegate: SliverChildBuilderDelegate((context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        }))
      ],
    );
  }

这将产生以下结果。

Flutter 文档：https://flutter.dev/docs/development/ui/advanced/slivers

【讨论】：