Flutter中如何用SingleChildScrollView和GridView实现连续滚动

Posted 2023-02-23

【中文标题】Flutter中如何用SingleChildScrollView和GridView实现连续滚动

【英文标题】：How to implement continuous scroll with SingleChildScrollView and GridView in Flutter

【发布时间】：2018-12-23 03:20:30

【问题描述】：

我目前有一个 SingleChildScrollView 作为父级和一个 GridView 作为子小部件之一。一切正常，但是当 GridView 完成滚动时，滚动不会传递给父 ScrollView。在横向模式下，GridView 占据了整个屏幕，因此用户只能滚动 GridView。我怎样才能通过卷轴？

SingleChildScrollView(
  controller: _hideButtonController,
  child: Container(
    padding: EdgeInsets.only(bottom: 80.0), //padding for fab
    child: Column(
      children: <Widget>[
        _previousWidgets(),
        _gridWidget(),
      ],
    ),
  ),
);

【参考方案1】：

您应该使用CustomScrollView 而不是SingleChildScrollView。

CustomScrollView 是一个可以组合多种类型内容的滚动视图。例如列表、网格或普通小部件。

CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Container(
        height: 50.0,
        width: double.infinity,
        color: Colors.yellow,
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0),
      delegate: SliverChildBuilderDelegate(
        (context, index) 
          return Container(
            color: Colors.red,
          );
        ,
        childCount: 10,
      ),
    ),
    SliverPadding(
      padding: const EdgeInsets.only(bottom: 80.0),
    )
  ],
),

【讨论】：

帮了大忙，谢谢

【参考方案2】：

在你的 GridView 中设置这样的物理，你很高兴：

physics: NeverScrollableScrollPhysics()

编辑：

这样做可能会占用大量资源，因为它一次性生成所有项目，而不是在滚动时膨胀/生成项目，因此请确保您的网格或列表中没有大量数据。