Flutter中如何批量切换多个OutlinedButton的边框颜色？

核心思路是通过单个状态变量mode标记当前选中的按钮索引，动态计算每个按钮的边框颜色，无需维护完整的颜色列表，同时正确使用MaterialStateProperty适配按钮样式要求。

步骤1：定义状态变量 #

在你的State类中声明mode变量，标记当前选中的按钮索引（初始值设为0，对应第一个按钮默认选中）：

int mode = 0;

步骤2：重构按钮样式 #

每个OutlinedButton的边框颜色通过mode判断，并用MaterialStateProperty.all()包裹BorderSide，确保状态更新时样式能正确刷新：

return Row(
  children: [
    OutlinedButton(
      onPressed: () {
        setState(() {
          mode = 0;
        });
      },
      style: OutlinedButton.styleFrom(
        side: MaterialStateProperty.all(
          BorderSide(
            color: mode == 0 ? Colors.amber : Colors.white,
            width: 2,
          ),
        ),
      ),
      child: Text('Filter : Age', style: TextStyle(color: Colors.brown[900])),
    ),
    OutlinedButton(
      onPressed: () {
        setState(() {
          mode = 1;
        });
      },
      style: OutlinedButton.styleFrom(
        side: MaterialStateProperty.all(
          BorderSide(
            color: mode == 1 ? Colors.amber : Colors.white,
            width: 2,
          ),
        ),
      ),
      child: Text('Filter : Gender', style: TextStyle(color: Colors.brown[900])),
    ),
    OutlinedButton(
      onPressed: () {
        setState(() {
          mode = 2;
        });
      },
      style: OutlinedButton.styleFrom(
        side: MaterialStateProperty.all(
          BorderSide(
            color: mode == 2 ? Colors.amber : Colors.white,
            width: 2,
          ),
        ),
      ),
      child: Text('Filter : Location', style: TextStyle(color: Colors.brown[900])),
    ),
  ],
);

原代码失效原因 #

你原代码中直接给colorlist_down重新赋值新列表，若colorlist_down是在build方法内定义的，每次setState触发build时，列表会被重新初始化，导致状态更新失效；即使是State类成员变量，这种维护完整颜色列表的方式也冗余，且OutlinedButton.styleFrom的side参数需要MaterialStateProperty类型，直接传BorderSide虽能编译，但状态更新时可能无法正确触发样式重建。

进阶优化（复用逻辑） #

如果按钮数量较多，可以通过循环生成按钮，减少重复代码：

final List<String> buttonTexts = ['Filter : Age', 'Filter : Gender', 'Filter : Location'];

return Row(
  children: List.generate(buttonTexts.length, (index) {
    return OutlinedButton(
      onPressed: () {
        setState(() {
          mode = index;
        });
      },
      style: OutlinedButton.styleFrom(
        side: MaterialStateProperty.all(
          BorderSide(
            color: mode == index ? Colors.amber : Colors.white,
            width: 2,
          ),
        ),
      ),
      child: Text(buttonTexts[index], style: TextStyle(color: Colors.brown[900])),
    );
  }),
);

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