Flutter中如何消除Row内Text与TextButton间距并将Switch居右

问题1：Text与TextButton之间的多余间距 #

TextButton默认自带内边距和最小宽度，这就是多余间距的来源。直接修改TextButton样式就能去掉：

• 通过style: TextButton.styleFrom(padding: EdgeInsets.zero, minimumSize: Size(0, 0))，把默认的内边距、最小宽高都清零。
• 可选添加tapTargetSize: MaterialTapTargetSize.shrinkWrap，让按钮点击区域刚好贴合文本大小（默认点击区域会比文本大）。

问题2：将Switch移至布局右侧 #

在TextButton和Switch之间加入Spacer()组件，它会自动填充Row里的剩余空白空间，直接把Switch推到布局最右侧。

修改后的完整代码 #

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    const Text(
      'I agree to the ',
    ),
    TextButton(
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        minimumSize: Size(0, 0),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      onPressed: () {},
      child: const Text('Terms of Service'),
    ),
    Spacer(),
    Switch(
      value: _tosAccepted,
      onChanged: (bool value) {
        setState(() {
          _tosAccepted = value;
        });
      },
    ),
  ],
),

补充说明 #

如果遇到文本和按钮对齐错位的情况，可以给外层Row加上crossAxisAlignment: CrossAxisAlignment.center（默认就是该值，多数场景下无需额外设置）。

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