Flutter实现带双图标按钮：如何在按钮右侧添加箭头？

你已经掌握了ElevatedButton.icon的用法，但这个构造方法是固定的「图标左+文字右」布局，想要在按钮右侧再加箭头图标的话，换用普通的ElevatedButton，通过Row来自由组合元素就可以啦，灵活性更高。

完整示例（左侧图标+文字+右侧箭头） #

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
    ),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min, // 让按钮宽度适配内容，避免撑满父容器
    children: [
      // 左侧的主页图标
      Icon(
        Icons.home,
        color: Colors.green,
        size: 30.0,
      ),
      SizedBox(width: 8.0), // 图标与文字的间距
      Text('Elevated Button'),
      SizedBox(width: 8.0), // 文字与右侧箭头的间距
      // 右侧的箭头图标
      Icon(
        Icons.arrow_forward,
        color: Colors.white,
        size: 20.0,
      ),
    ],
  ),
)

简化版（仅文字+右侧箭头） #

如果不需要左侧的主页图标，直接去掉对应元素即可：

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
    ),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Elevated Button'),
      SizedBox(width: 8.0),
      Icon(Icons.arrow_forward, size: 20.0),
    ],
  ),
)

关键提示 #

• mainAxisSize: MainAxisSize.min是核心，它能让按钮只占用内容所需的宽度，而不是默认的撑满父容器
• 用SizedBox来控制元素间的间距，让布局看起来更协调自然

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