Flutter 二维滚动 TableView - 在 Web 应用程序上看不到垂直或水平滚动条

Question

我正在尝试新的 Fluttertwo_Dimension_scrollables 包及其 TableView 小部件。 我创建了一个简单的测试应用程序来显示 8 列 x 35 行网格。

但是，当我将其作为网络应用程序运行时，我看不到任何水平或垂直滚动条。

有什么建议吗？

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:
    );
  }

  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);
          },
        ),
      )
    ],);
  }
}

Answer 1

这就是我让它适用于我的案例的方法。要显示滚动条，有几个条件：

• 将构建器包含在滚动条小部件中，如下所示
• thumbVisibility 设置为 true
• verticalDetails 使用与滚动条相同的控制器进行初始化，物理设置为 AlwaysScrollableScrollPhysics()。这是决定滚动条是否显示的因素。
• rowCount 应设置 - 不能无限滚动

    return Scaffold(
      body: Scrollbar (
        controller: _verticalController,
        thumbVisibility: true,
        trackVisibility: true,
        child: Scrollbar (
          controller: _horizontalController,
          thumbVisibility: true,
          trackVisibility: true,
          notificationPredicate: (notif) => notif.depth == 1,
          child: TableView.builder (
            cellBuilder: _buildCell,
            columnBuilder: _buildColumn,
            rowBuilder: _buildRow,
            pinnedRowCount: 1,
            columnCount: _columnCount,
            rowCount: _rowCount,
            diagonalDragBehavior: DiagonalDragBehavior.free,
            verticalDetails: ScrollableDetails.vertical (
              controller: _verticalController,
              physics: AlwaysScrollableScrollPhysics(),
            ),
            horizontalDetails: ScrollableDetails.horizontal (
              controller: _horizontalController,
              physics: AlwaysScrollableScrollPhysics(),
            ),
          ),
        ),
      ),
      ...