如何为Flutter中的TextButton.icon组件添加边框？

给TextButton.icon加边框不用嵌套Container，直接用组件自带的style参数配置ButtonStyle就能实现，还能和你已经设置的文本、图标颜色整合在一起，示例代码如下：

TextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('添加'),
  style: ButtonStyle(
    // 设置边框样式
    side: MaterialStateProperty.all(
      const BorderSide(color: Colors.blue, width: 2),
    ),
    // 这里可以继续配置你已经实现的文本、图标颜色
    foregroundColor: MaterialStateProperty.all(Colors.blue),
  ),
)

如果需要针对不同状态（比如按下、悬停）设置不同的边框样式，可以用MaterialStateProperty.resolveWith来处理：

TextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('添加'),
  style: ButtonStyle(
    side: MaterialStateProperty.resolveWith((states) {
      // 按下状态时的边框
      if (states.contains(MaterialState.pressed)) {
        return const BorderSide(color: Colors.deepBlue, width: 2);
      }
      // 默认状态的边框
      return const BorderSide(color: Colors.blue, width: 2);
    }),
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      return states.contains(MaterialState.pressed) ? Colors.deepBlue : Colors.blue;
    }),
  ),
)

这种方式不需要额外嵌套组件，直接通过组件自身的样式API就能完成需求，比用Container更简洁灵活。

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