Flutter中ListView无法通过滑动手势滚动问题求助

问题根源在于水平滚动场景下shrinkWrap: true的使用，该属性会让ListView自适应子项尺寸，导致手势识别逻辑异常，同时RawScrollbar的事件处理可能干扰了ListView的滑动手势响应。以下是两种可行的修复方案：

方案一：移除shrinkWrap并明确ListView尺寸 #

通过包裹容器给ListView指定固定高度（水平滚动时需约束垂直方向尺寸），同时移除shrinkWrap: true，让ListView正常响应滑动手势：

RawScrollbar(
  thumbColor: Colors.grey[200],
  isAlwaysShown: true,
  controller: controller,
  thickness: 17,
  radius: const Radius.circular(20),
  child: Container(
    height: 120, // 根据业务需求设置合适高度
    child: ListView.separated(
      scrollDirection: Axis.horizontal,
      // 移除shrinkWrap: true
      controller: controller,
      padding: const EdgeInsets.only(left: 5, right: 5, bottom: 20),
      itemBuilder: (context, index) {
        return Container(
          width: 90, // 给子项设置固定宽度，确保存在滚动空间
          color: Colors.blue[100 * (index % 9)],
          alignment: Alignment.center,
          child: Text('Item $index'),
        );
      },
      separatorBuilder: (context, index) => const SizedBox(width: 10),
      itemCount: 20, // 必须指定itemCount，否则列表无法生成可滚动内容
    ),
  ),
);

方案二：保留shrinkWrap的兼容处理 #

如果必须保留shrinkWrap: true，可以通过NotificationListener同步滚动事件，确保ListView的滑动手势能被正确识别并同步给RawScrollbar：

final ScrollController controller = ScrollController();

RawScrollbar(
  thumbColor: Colors.grey[200],
  isAlwaysShown: true,
  controller: controller,
  thickness: 17,
  radius: const Radius.circular(20),
  child: NotificationListener<ScrollNotification>(
    onNotification: (notification) {
      // 同步滚动位置，确保RawScrollbar能正确响应ListView的滑动
      controller.jumpTo(controller.offset);
      return false;
    },
    child: ListView.separated(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      controller: controller,
      padding: const EdgeInsets.only(left: 5, right: 5, bottom: 20),
      itemBuilder: (context, index) {
        return Container(
          width: 90,
          color: Colors.green[100 * (index % 9)],
          alignment: Alignment.center,
          child: Text('Item $index'),
        );
      },
      separatorBuilder: (context, index) => const SizedBox(width: 10),
      itemCount: 20,
    ),
  ),
);

核心注意事项 #

• 水平滚动的ListView必须给子项设置固定宽度，否则子项会自适应父容器宽度，导致没有滚动空间
• itemCount是必填项，缺失会导致ListView无法生成可滚动的列表内容
• 尽量避免在水平滚动场景下使用shrinkWrap: true，该属性更适合垂直滚动且内容高度不确定的场景

内容的提问来源于stack exchange，提问作者Dev94