单个屏幕上有两个列表

Question

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

我的意思是我希望能够拥有一个垂直的gridView（https://flutter.dev/docs/cookbook/lists/grid-lists），然后在其下方插入一个水平列表（https://flutter.dev/docs/cookbook/lists/horizontal-list）。我尝试将两者都插入到Widget列表中，但这根本不起作用。

能给我一些建议吗？

Answer 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小部件。

Answer 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