Flutter 如何使用 ListView 水平和 GridView 垂直滚动屏幕

Question

我有一个像附加图像一样的布局。我希望在同一屏幕和水平 Listview 中使用流行/最新项目，并在 GridView 下方使用完整的项目列表。

ListView 应该具有水平滚动，而且，所有屏幕都可以垂直滚动。右侧的暗条模拟滚动条（不是必需的，仅用于说明目的）。

您可以在 Google Play 应用程序本身中看到这种行为，您可以在其中水平滑动以查看类别中的更多项目，也可以垂直滚动以查看更多类别列表。

我尝试了 Stack 和 Column 小部件，但没有任何效果。关于如何构建此布局的任何想法？

Answer 1

你可以使用Slivers，试试我做的这个例子：

    @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: new AppBar(),
            body: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: SizedBox(
                    height: 100,
                    child: ListView.builder(
                        itemExtent: 150,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) => Container(
                              margin: EdgeInsets.all(5.0),
                              color: Colors.orangeAccent,
                            ),
                        itemCount: 20),
                  ),
                ),
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: 1.5,
                  ),
                  delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                          margin: EdgeInsets.all(5.0),
                          color: Colors.yellow,
                        ),
                  ),
                )
              ],
            ));
      }

您也可以从此链接了解有关 Sliver 的更多信息：https : //medium.com/flutter-io/slivers-demystified-6ff68ab0296f