Flutter GridView内设置maxLines的中文文本第二行显示不全怎么办

问题表现 #

水平滚动GridView内，设置maxLines: 2、overflow: TextOverflow.ellipsis的Text组件第二行文本底部被截断，无法完整展示，效果见截图：
Text第二行截断效果截图

复现代码 #

Widget testText() {
  return GridView.builder(
    scrollDirection: Axis.horizontal,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemCount: 8,
    itemBuilder: (BuildContext context, int index) {
      return Text(
        '测试两行测试两行测测试两行试两行测测试两行试两',
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontSize: 20),
      );
    },
  );
}

问题原因 #

SliverGridDelegateWithFixedCrossAxisCount默认的子组件宽高比childAspectRatio为1.0，即网格子项为正方形。20号字号的中文文本搭配默认行高，两行内容的实际排版高度略高于正方形单元格分配的可用高度，叠加中文字符渲染自带的底部排版边距，最终导致第二行文字底部被网格裁切。

解决方案 #

可根据业务场景任选以下一种方案修复：

• 调整网格代理的宽高比参数，给纵向预留足够文本显示的高度
  调小childAspectRatio的值（数值越小，子项高度越高），直到文本完整显示即可，示例修改：

  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 0.8, // 可根据实际字号、布局需求微调该值
  ),
  

• 给Text设置固定行高的StrutStyle，锁定文本排版高度，避免字体默认边距导致的高度溢出

  Text(
    '测试两行测试两行测测试两行试两行测测试两行试两',
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontSize: 20),
    strutStyle: StrutStyle(
      fontSize: 20,
      height: 1.2, // 行高倍数，可按需调整
      forceStrutHeight: true,
    ),
  )
  

• 给Text添加上下内边距，避免文本贴住单元格边缘被裁切

  Padding(
    padding: EdgeInsets.symmetric(vertical: 2),
    child: Text(
      '测试两行测试两行测测试两行试两行测测试两行试两',
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontSize: 20),
    ),
  )
  

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