Flutter Web（Chrome浏览器）中two_dimensional_scrollables的TableView无法实现横向滚动

遇到这种横向滚动失效的问题挺常见的，我帮你梳理几个可能的解决方向，你可以逐一排查试试：

• 先确认全局ScrollBehavior的应用是否到位
  你已经定义了GdScrollBehavior，但要确保在MaterialApp里正确设置，比如：

  MaterialApp(
    scrollBehavior: GdScrollBehavior(),
    // 其他配置项...
  )
  

  另外，有时候单独给TableView包裹一层ScrollConfiguration会更稳妥，避免全局配置被局部组件覆盖：

  ScrollConfiguration(
    behavior: GdScrollBehavior(),
    child: TableView(
      // 你的TableView配置内容
    ),
  )
  

• 检查TableView的横向布局配置是否合理
  要确保TableView的内容宽度确实超过了可视区域，不然横向滚动自然不会触发。比如确认horizontalViewportBuilder返回的内容总宽度足够大，或者给TableView设置一个明确的父容器宽度，让内容溢出。举个例子：

  TableView(
    columnCount: 10, // 设置足够多的列数
    horizontalViewportBuilder: (context, offset) {
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(10, (index) => Container(
            width: 150, // 每个列设置足够宽的尺寸
            height: 50,
            child: Text('Column $index'),
          )),
        ),
      );
    },
    // 纵向滚动相关配置...
  )
  

• 调整TableView的手势识别配置
  two_dimensional_scrollables提供了gestureConfiguration参数，可以专门配置二维滚动的手势规则，你可以尝试明确开启横向拖拽的识别：

  TableView(
    gestureConfiguration: const TwoDimensionalScrollableGestureConfiguration(
      // 明确允许鼠标和触摸设备触发横向拖拽
      horizontalDragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch},
      // 确保横向拖拽的起始行为符合预期
      horizontalDragStartBehavior: DragStartBehavior.start,
    ),
    // 其他配置项...
  )
  

  这种方式可以直接给TableView指定允许的拖拽设备，避免全局配置可能存在的遗漏。

• 排查包版本问题
  有时候旧版本的two_dimensional_scrollables可能存在Web端横向滚动的bug，建议你把包更新到最新的稳定版本，修改pubspec.yaml里的版本号后执行flutter pub get即可。

备注：内容来源于stack exchange，提问作者Davout