Flutter：如何让Row中的退出按钮占满Row全部高度

要实现退出按钮填满Row高度、固定宽度，同时用户名占剩余宽度的效果，你可以按以下方式修改代码：

核心修改点： #

• 用SizedBox给退出按钮固定宽度，并设置height: double.infinity让它填充Row的高度（Row高度由左侧带padding的用户名区域自动确定）
• 清除TextButton的默认内边距，确保灰色背景完全填充按钮区域
• 保留Expanded让用户名区域占据剩余宽度

修改后的代码： #

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.greenAccent,
        child: const Padding(
          padding: EdgeInsets.symmetric(
            vertical: 20,
            horizontal: 12,
          ),
          child: Text('test@example.com'),
        ),
      ),
    ),
    SizedBox(
      width: 60, // 指定退出按钮宽度
      height: double.infinity, // 填充Row的全部高度
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: Colors.grey,
          minimumSize: Size.zero,
          padding: EdgeInsets.zero, // 清除默认内边距
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
        onPressed: () {},
        child: Icon(Icons.logout),
      ),
    ),
  ],
),

原理说明： #

• 左侧Expanded的Container通过vertical:20的padding确定了Row的整体高度，右侧SizedBox的height: double.infinity会自动匹配这个高度
• 清除TextButton的默认padding后，灰色背景会完全覆盖SizedBox区域，最大化点击范围
• 固定SizedBox的宽度，保证退出按钮尺寸符合预期

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