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

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

1 个答案: