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