Flutter中如何隐藏GridView.builder自带滚动条仅显示RawScrollbar

出现双滚动条的原因是GridView.builder默认自带滚动条效果，且自身支持滚动，两个可滚动组件同时监听到滚动事件时就会各自展示滚动条，可以根据你的业务需求选择以下任意一种方案实现：

• 方案1：禁用GridView自身滚动能力（适配你当前的代码逻辑，最常用）
  你已经给GridView设置了shrinkWrap: true让高度自适应内容，只需要额外给GridView添加physics: const NeverScrollableScrollPhysics()属性，让GridView本身不响应滚动事件，所有滚动逻辑完全交给外层RawScrollbar处理，GridView自身就不会触发滚动条显示。
  修改后的完整代码如下：

@override
Widget build(BuildContext context) {
  return Expanded(
    child: RawScrollbar(
      thumbColor: customAppColors.secondaryColor,
      isAlwaysShown: true,
      child: GridView.builder(
        padding: EdgeInsets.all(10),
        shrinkWrap: true,
        // 新增属性：禁用GridView自身滚动响应
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
          crossAxisCount: 3,
          crossAxisSpacing: 3,
          mainAxisSpacing: 3,
          height: 170,
        ),
        itemBuilder: (_, index) {
          return Card();
        },
        itemCount: list.length,
      ),
    ),
  );
}

• 方案2：仅隐藏GridView的滚动条（保留GridView自身滚动能力）
  如果业务逻辑需要保留GridView的原生滚动能力，只需要隐藏它自带的滚动条，可以通过ScrollConfiguration包裹GridView，禁用子组件的滚动条配置即可：

@override
Widget build(BuildContext context) {
  return Expanded(
    child: RawScrollbar(
      thumbColor: customAppColors.secondaryColor,
      isAlwaysShown: true,
      child: ScrollConfiguration(
        // 配置隐藏子组件的默认滚动条
        behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
        child: GridView.builder(
          padding: EdgeInsets.all(10),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
            crossAxisCount: 3,
            crossAxisSpacing: 3,
            mainAxisSpacing: 3,
            height: 170,
          ),
          itemBuilder: (_, index) {
            return Card();
          },
          itemCount: list.length,
        ),
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Bezal'el Nwabia