Flutter Web应用中StickyHeadersTable无法垂直或水平滚动问题

在Flutter Web项目中使用StickyHeadersTable组件时，出现表格既无法垂直滚动也无法水平滚动的问题，原实现代码如下：

child: SizedBox(
  width: MediaQuery.of(context).size.width * 0.95,
  height: MediaQuery.of(context).size.height * 0.6,
  child: StickyHeadersTable(
    columnsLength: numeroColonne,
    rowsLength: listImpiantiPerGriglia.length,
    columnsTitleBuilder: (i) {
      return Container(
        alignment: const Alignment(0, 0),
        height: altezzaCella,
        width: larghezzaCella,
        child: Text(
          attivita.titoliColonne[i],
        ),
      );
    },
    rowsTitleBuilder: (i) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          titoliRigheRagsoc[i],
        ),
      );
    },
    cellDimensions: CellDimensions.fixed(
        contentCellWidth: larghezzaCella,
        contentCellHeight: altezzaCella,
        stickyLegendWidth: larghezzaLegend,
        stickyLegendHeight: altezzaCella),
    contentCellBuilder: (i, j) {
      return Container(
        alignment: const Alignment(0, 0),
        height: altezzaCella,
        width: larghezzaCella,
        child: Text(
          matriceCelle[j][i],
        ),
      );
    },
  ),
),

解决步骤： #

• 添加滚动视图嵌套
  StickyHeadersTable本身不内置滚动能力，需要手动将其包裹在SingleChildScrollView组件中，同时根据需求处理垂直和水平滚动：

  • 若需要垂直+水平滚动，可嵌套两层SingleChildScrollView，外层处理垂直滚动，内层处理水平滚动（或反之），分别设置scrollDirection参数。
  • 配合Scrollbar组件可让滚动行为更直观（可选）。

• 确认内容超出容器尺寸
  检查larghezzaCella、larghezzaLegend的计算值，确保表格总宽度超过外层SizedBox的宽度；同时确认listImpiantiPerGriglia.length * altezzaCella的总高度超过SizedBox的高度，只有内容超出容器时滚动才会生效。

修改后的示例代码： #

child: SizedBox(
  width: MediaQuery.of(context).size.width * 0.95,
  height: MediaQuery.of(context).size.height * 0.6,
  child: Scrollbar(
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: StickyHeadersTable(
          columnsLength: numeroColonne,
          rowsLength: listImpiantiPerGriglia.length,
          columnsTitleBuilder: (i) {
            return Container(
              alignment: const Alignment(0, 0),
              height: altezzaCella,
              width: larghezzaCella,
              child: Text(
                attivita.titoliColonne[i],
              ),
            );
          },
          rowsTitleBuilder: (i) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                titoliRigheRagsoc[i],
              ),
            );
          },
          cellDimensions: CellDimensions.fixed(
              contentCellWidth: larghezzaCella,
              contentCellHeight: altezzaCella,
              stickyLegendWidth: larghezzaLegend,
              stickyLegendHeight: altezzaCella),
          contentCellBuilder: (i, j) {
            return Container(
              alignment: const Alignment(0, 0),
              height: altezzaCella,
              width: larghezzaCella,
              child: Text(
                matriceCelle[j][i],
              ),
            );
          },
        ),
      ),
    ),
  ),
),

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