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

Question

我目前有一个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(),
      ],
    ),
  ),
);

Answer 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),
    )
  ],
),

Answer 2

在您的GridView内部设置这样的物理结构，您可以开始进行以下工作：

physics: NeverScrollableScrollPhysics(),