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

Posted 2023-02-23

【中文标题】在 Flutter 中使用 GridView 时使轮播向上滚动

【英文标题】：Make the carousel scroll up while using a GridView in Flutter

【发布时间】：2020-11-03 01:32:32

【问题描述】：

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

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 应该逐渐覆盖整个页面。

我尝试了什么：

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

提前感谢您的帮助。

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

【讨论】：

我了解 Silver child 的使用，但正如我提到的，我还必须在卷轴中添加轮播部分，这不是 Silver。我正在将此库用于轮播 pub.dev/packages/carousel_pro 它是 RenderBox 而不是 RenderSilver。

【参考方案2】：

经过一番修补和研究，我找到了解决方案。简而言之，我使用了 CustomScrollView 并将轮播放在 SliverAppBar 中，当我向上滚动时它会隐藏起来。这是我现在的 Widget 树：

return Container(
  child: CustomScrollView(
    slivers: [
      SliverAppBar(
        floating: false,
        pinned: true,
        elevation: 4,
        backgroundColor: Theme.of(context).primaryColor,
        expandedHeight: carouselHeight,
        title: Text(
          "MyTitle",
        ),
        flexibleSpace: FlexibleSpaceBar(
          background: myCarousel
        ),
      ),
      SliverPadding(
        padding: EdgeInsets.all(14),
        sliver: SliverGrid.count(
          crossAxisCount: 2,
          childAspectRatio: 3 / 4,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          children: myDummyProductList,
        ),
      ),
    ],
  ),
);