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

Posted 2023-02-23

【中文标题】Flutter 如何使用 ListView 水平和 GridView 垂直滚动屏幕

【英文标题】：Flutter How to vertical scrolling a screen with a ListView horizontal and GridView

【发布时间】：2019-08-15 08:03:51

【问题描述】：

我有一个类似于附件图像的布局。我希望在同一个屏幕和水平 Listview 中包含流行/最新项目，并在 GridView 下方包含完整项目列表。

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

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

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

【参考方案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