flutter - 在 Flutter 中使用 GridView 时使轮播向上滚动

Question

我当前的小部件树是这样的：

return Container(
  child: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        myCarouselWidget(),
        GridView.count(
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          padding: EdgeInsets.all(8),
          childAspectRatio: 3 / 4,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          children: myDummyProductList,
        ),
      ],
    ),
  ),
);

现在我想要的是，当我滚动时，轮播应该向上滚动，而 gridView 应该逐渐覆盖整个页面。

我尝试了什么：

1. 物理：NeverScrollableScrollPhysics()
2. 删除 SingleChildScrollView 并将 GridView 包装在 Expanded 小部件中有效，但轮播不会向上滚动。

提前感谢您的帮助。

标签： flutterflutter-layout

Answer 1

网格的主轴方向是它滚动的方向。最常用的网格布局是GridView.count，它创建一个在横轴上具有固定数量的瓦片的GridView.extent布局，以及 ，它创建一个具有最大横轴范围的瓦片的布局。自定义SliverGridDelegate可以生成任意 2D 子元素排列，包括未对齐或重叠的排列。

CustomScrollView(
  primary: false,
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(20),
      sliver: SliverGrid.count(
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("He'd have you all unravel at the"),
            color: Colors.green[100],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Heed not the rabble'),
            color: Colors.green[200],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Sound of screams but the'),
            color: Colors.green[300],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Who scream'),
            color: Colors.green[400],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Revolution is coming...'),
            color: Colors.green[500],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('Revolution, they...'),
            color: Colors.green[600],
          ),
        ],
      ),
    ),
  ],
)