如何让Flutter的DataTable在桌面端实现正常横向滚动？

问题原因 #

• Flutter 桌面端默认的MaterialScrollBehavior仅开放了触控输入的拖动滚动权限，鼠标指针拖动触发滚动的能力默认是关闭的，这是桌面端无法直接拖动触发横向滚动的核心原因。
• 桌面端鼠标滚轮默认仅响应纵向滚动事件，若要通过滚轮触发横向滚动，默认需要按住Shift+滚轮操作，普通滚动滚轮不会触发横向滚动逻辑。

解决方案 #

给横向滚动的组件外层套入ScrollConfiguration组件，修改滚动行为配置开放鼠标拖动权限即可，修改后的代码如下（同时兼容SingleChildScrollView和ListView两种实现）：
首先在文件头部导入UI库：

import 'dart:ui';

修改_itemTable方法中的返回逻辑：

return Container(
  margin: const EdgeInsets.only(top: 10),
  child: ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(
      // 配置允许拖动滚动的设备类型
      dragDevices: {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      },
    ),
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        showCheckboxColumn: false,
        columns: headers.map<DataColumn>((h) => DataColumn(label: Text(h))).toList(),
        rows: rows
      ),
    ),
  ),
);

补充说明 #

• 修改后桌面端可直接用鼠标拖动表格横向滚动，原有Shift+滚轮触发横向滚动的逻辑也保留，不影响使用习惯。
• 该配置不会干扰外层纵向滚动的正常运行，也不会改变移动端的滚动交互逻辑。
• 若需要实现普通滚轮直接控制横向滚动，可给横向滚动组件加Listener监听PointerScrollEvent事件，手动控制滚动控制器的偏移量即可。

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