Flutter：GridView在SliverFillRemaining内滚动失效问题求助

问题描述 #

在Flutter中构建了如下组件结构，已为CustomScrollView设置AlwaysScrollableScrollPhysics，为GridView设置NeverScrollableScrollPhysics，但滚动功能仍无法正常工作。

主页面代码 #

Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(100.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: ValueListenableBuilder<UIState>(
                  valueListenable: valuePageNotifier,
                  builder: (context, uiState, child) {
                    return Container(
                        margin: const EdgeInsets.symmetric(
                          vertical: 36,
                        ),
                        constraints: const BoxConstraints(
                            minWidth: 800,
                            maxWidth: 850,
                            minHeight: 650,
                            maxHeight: 700),
                        // color: Colors.green,
                        child: const Stack(
                          // clipBehavior: Clip.antiAlias,
                          alignment: Alignment.center,
                          children: [
                            WorksPage(
                              height: 700,
                              isActive: true,
                            ),
                          ],
                        ));
                  }),
            ),
          ],
        ),
      ),
    );
}

WorksPage组件代码 #

Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.grey[50]!,
        borderRadius: const BorderRadius.only(
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(8),
        ),
      ),
      child: Padding(
        padding:
            const EdgeInsets.only(left: 16, top: 18, right: 20, bottom: 18),
        child: CustomScrollView(
          scrollBehavior: CustomScrollBehavior(),
          physics: const AlwaysScrollableScrollPhysics(),
          slivers: [
            SliverFillRemaining(
              fillOverscroll: true,
              child: Column(
                children: [
                  Expanded(
                    child: GridView.custom(
                      physics: const NeverScrollableScrollPhysics(),
                      controller: ScrollController(),
                      clipBehavior: Clip.antiAlias,
                      gridDelegate: SliverQuiltedGridDelegate(
                          mainAxisSpacing: 20,
                          crossAxisSpacing: 10,
                          crossAxisCount: 2,
                          repeatPattern: QuiltedGridRepeatPattern.inverted,
                          pattern: const [
                            QuiltedGridTile(1, 2),
                            QuiltedGridTile(2, 1),
                            QuiltedGridTile(1, 1),
                          ]),
                      childrenDelegate: SliverChildBuilderDelegate(
                          semanticIndexOffset: 2,
                          childCount: models.length, (context, index) {
                        return Padding(
                          padding: const EdgeInsets.only(bottom: 5),
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              border: Border.all(color: Colors.grey),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Padding(
                                padding: const EdgeInsets.all(8),
                                child: Image.asset(
                                  models[index].path!,
                                  fit: BoxFit.cover,
                                )),
                          ),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

解决建议 #

1. 移除冗余的嵌套结构 #

SliverFillRemaining会强制子组件填充剩余空间，再嵌套Column+Expanded+GridView会让GridView被拉伸到父级可用空间，导致CustomScrollView无法感知内容超出，无法触发滚动。直接将GridView转为sliver组件，去掉多余嵌套：

CustomScrollView(
  scrollBehavior: CustomScrollBehavior(),
  physics: const AlwaysScrollableScrollPhysics(),
  slivers: [
    SliverGrid.custom(
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverQuiltedGridDelegate(
          mainAxisSpacing: 20,
          crossAxisSpacing: 10,
          crossAxisCount: 2,
          repeatPattern: QuiltedGridRepeatPattern.inverted,
          pattern: const [
            QuiltedGridTile(1, 2),
            QuiltedGridTile(2, 1),
            QuiltedGridTile(1, 1),
          ]),
      childrenDelegate: SliverChildBuilderDelegate(
          semanticIndexOffset: 2,
          childCount: models.length, (context, index) {
        return Padding(
          padding: const EdgeInsets.only(bottom: 5),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Padding(
                padding: const EdgeInsets.all(8),
                child: Image.asset(
                  models[index].path!,
                  fit: BoxFit.cover,
                )),
          ),
        );
      }),
    ),
  ],
)

2. 移除GridView的独立ScrollController #

给不可滚动的GridView设置独立控制器，会干扰父级CustomScrollView的滚动事件传递，直接删除该参数即可。

3. 确认父级容器约束有效性 #

主页面Container的maxHeight:700是合理的，但要确保WorksPage的height参数被正确用于约束自身高度。如果未使用该参数，建议给CustomScrollView的父级（如Padding）添加明确高度约束，保证CustomScrollView有固定的可滚动视口。

4. 检查CustomScrollBehavior实现 #

如果CustomScrollBehavior重写了getScrollPhysics方法，可能会覆盖你设置的AlwaysScrollableScrollPhysics，确保该方法未修改滚动物理特性：

class CustomScrollBehavior extends ScrollBehavior {
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    return super.getScrollPhysics(context);
  }
}

内容的提问来源于stack exchange，提问作者Cyrus the Great