Flutter中Row内CloseButton无法按TextBaseline对齐问题解决

在Flutter开发中，使用Row组件布局时会遇到一个问题：其中的CloseButton无法和文本按照TextBaseline（文本下方的基准线）正确对齐。

最小复现代码 #

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: const [
    Text(
      "测试文本",
      style: TextStyle(fontSize: 20),
    ),
    CloseButton(),
  ],
)

尝试过的无效方案 #

• 调整Row的CrossAxisAlignment参数（如center、start等）
• 单独为CloseButton设置居中类布局属性

问题根源与解决方案 #

问题的核心在于CloseButton的底层实现依赖IconButton，而IconButton默认带有EdgeInsets.all(8.0)的内边距，这一内边距导致按钮整体位置偏移，无法与文本基准线对齐。

只需要给CloseButton添加padding: EdgeInsets.zero即可消除默认内边距，实现正确对齐：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: const [
    Text(
      "测试文本",
      style: TextStyle(fontSize: 20),
    ),
    CloseButton(
      padding: EdgeInsets.zero, // 关键修复代码
    ),
  ],
)

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