Flutter two_dimensional_scrollables库TableView组件Web端无滚动条问题求助

嗨，我最近在尝试使用Flutter新的two_dimensional_scrollables包中的TableView组件，做了一个简单的测试应用来展示8列×35行的网格。但当我在Web端运行这个应用时，完全看不到水平或垂直滚动条，有没有大佬能给点解决建议呀？

我的代码如下：

class MainWindow extends StatefulWidget {
  const MainWindow({Key? key}) : super(key: key);
  @override
  State<MainWindow> createState() => _MainWindowState();
}
class _MainWindowState extends State<MainWindow> {

  final _dowTitle = ['','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

  ScrollController _horizController = ScrollController();
  ScrollController _vertController = ScrollController();

  Widget _taskTile(String aTitle, String aSubTitle) {
    return Card(
      elevation: 9.0,
      child: ListTile(
        title: Text(aTitle),
        subtitle: Text(aSubTitle),
        leading: Icon(Icons.task),
        trailing: Icon(Icons.forward),
      ),
    );
  }

  TableSpan _columnBuilder(int index) {
    final aColWidth = index == 0 ? 120.0 : 450.0;
    return TableSpan(
        extent: FixedTableSpanExtent(aColWidth),
        backgroundDecoration: TableSpanDecoration(border: TableSpanBorder(leading: BorderSide(color: Colors.grey), trailing: BorderSide(color: Colors.grey))),
        padding: TableSpanPadding(leading: 10.0, trailing: 10.0),
        recognizerFactories: {} // 补充空Map避免编译错误
    );
  }

  TableSpan _rowBuilder(int index) {
    return TableSpan(extent: const FixedTableSpanExtent(100.0));
  }

  TableViewCell _cellBuilder(TableVicinity aVicinity) {
    if (aVicinity.xIndex == 0) {
      if (aVicinity.yIndex  == 0) {
        return TableViewCell(child: Container(),);
      } else {
        return TableViewCell(child: Center(child: Text('Day part')),);
      }
    } else {
      if (aVicinity.yIndex == 0) {
        return TableViewCell(child: Center(child: Text(_dowTitle[aVicinity.xIndex])),);
      }
      return TableViewCell(child: Center(child: _taskTile('aTitle', 'aSubTitle')),);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Expanded(
        flex: 1,
        child: TableView.builder(
          horizontalDetails:   ScrollableDetails.horizontal(controller: _horizController, ),
          verticalDetails:   ScrollableDetails.vertical(controller: _vertController,),
          columnCount: 8,
          rowCount: 35,
          pinnedColumnCount: 1,
          pinnedRowCount: 1,
          columnBuilder: _columnBuilder,
          rowBuilder: _rowBuilder,
          diagonalDragBehavior: DiagonalDragBehavior.none,
          cellBuilder: (context, vicinity) {
            return _cellBuilder(vicinity);
          },
        ),
      )
    ],);
  }
}

可能的解决方法： #

• 显式嵌套Scrollbar组件关联控制器：由于TableView是二维滚动，需要分别为水平和垂直方向添加Scrollbar，并关联对应的滚动控制器。修改build方法的代码如下：

@override
Widget build(BuildContext context) {
  return Column(children: [
    Expanded(
      flex: 1,
      child: Scrollbar(
        controller: _horizController,
        orientation: Axis.horizontal,
        child: Scrollbar(
          controller: _vertController,
          orientation: Axis.vertical,
          child: TableView.builder(
            horizontalDetails: ScrollableDetails.horizontal(controller: _horizController),
            verticalDetails: ScrollableDetails.vertical(controller: _vertController),
            columnCount: 8,
            rowCount: 35,
            pinnedColumnCount: 1,
            pinnedRowCount: 1,
            columnBuilder: _columnBuilder,
            rowBuilder: _rowBuilder,
            diagonalDragBehavior: DiagonalDragBehavior.none,
            cellBuilder: (context, vicinity) {
              return _cellBuilder(vicinity);
            },
          ),
        ),
      ),
    )
  ],);
}

• 设置滚动条始终显示：默认Web端滚动条仅在滚动时显示，若希望一直可见，可给Scrollbar添加isAlwaysShown: true属性：

Scrollbar(
  isAlwaysShown: true,
  controller: _horizController,
  orientation: Axis.horizontal,
  // 其他代码
)

• 更新包版本：确保two_dimensional_scrollables包是最新版本，Web端的滚动条支持可能在新版本中有所优化，运行命令更新：

flutter pub upgrade two_dimensional_scrollables

另外，我注意到你代码中_columnBuilder方法的recognizerFactories字段未赋值，补充了空Map{}避免编译错误，这个小细节也记得处理哦。

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