Flutter SpannableGrid包多余高度问题：如何移除默认高度？

针对你遇到的未设置高度却出现默认多余高度的问题，可通过以下两种方式解决：

1. 调整SpannableGrid的gridSize参数 #

将gridSize从SpannableGridSize.parentHeight改为SpannableGridSize.content，让网格根据子组件的实际内容高度自适应，而非依赖父容器高度或使用默认高度：

content = SpannableGrid(
  gridSize: SpannableGridSize.content, // 修改此处参数
  showGrid: true,
  columns: 3,
  rows: 1,
  cells: _getCells(),
);

2. 消除Text组件的默认行高冗余 #

Text组件默认带有大于字体尺寸的行高，会造成视觉上的多余高度，可通过设置TextStyle的height属性为1来消除：

List<SpannableGridCellData> _getCells() {
    var result = <SpannableGridCellData>[];

    result.add(SpannableGridCellData(
      column: 2,
      row: 1,
      columnSpan: 2,
      id: "Test Cell 1",
      child: Text("test", style: TextStyle(height: 1)), // 添加行高设置
    ));
    result.add(SpannableGridCellData(
        column: 1,
        row: 1,
        id: "Test Cell 2",
        child: Text("test", style: TextStyle(height: 1)))); // 添加行高设置
    return result;
  }

额外注意点 #

你的第一个单元格配置column:2且columnSpan:2，在columns:3的网格下刚好占满列2和3，不会出现越界问题，后续调整列数时需注意列索引与跨度的匹配。

内容的提问来源于stack exchange，提问作者Pavithra S