Flutter如何避免使用MaterialStateProperty？TextButton相关疑问

这是Flutter更新引入的机制吗？ #

是的。Flutter在推出新一代Material按钮组件（包括TextButton、ElevatedButton、OutlinedButton）时，引入了基于MaterialStateProperty的样式系统，替代了旧版的FlatButton、RaisedButton等组件。这种设计的核心目的是让组件样式能根据自身状态（比如按下、悬停、禁用、选中）自动适配不同的表现，比旧版固定样式的组件更灵活。

如何避免繁琐的MaterialStateProperty写法？ #

你可以通过以下几种方式简化代码：

1. 使用组件自带的styleFrom静态方法 #

每个新按钮组件都提供了styleFrom方法，它可以直接接收普通的样式值，内部会自动将这些值包装成MaterialStateProperty，完全不用手动写MaterialStateProperty.all()。针对你的示例，改写后代码如下：

child: TextButton(
  style: TextButton.styleFrom(
    padding: EdgeInsets.only(
      left: 10,
      right: 10,
      top: 5,
      bottom: 5,
    ),
    elevation: 2,
    shadowColor: Colors.black,
    shape: RoundedRectangleBorder(
      side: BorderSide(
        color: Color.fromRGBO(85, 63, 48, 1.0),
        width: 1,
        strokeAlign: StrokeAlign.outside
      ),
      borderRadius: BorderRadius.circular(2)
    ),
    backgroundColor: Color.fromRGBO(241, 206, 181, 1.0),
  ),
  onPressed: () {},
  child: const Text("按钮"),
),

2. 复用通用样式 #

如果多个按钮需要使用相同样式，可以把样式抽成全局变量或方法，避免重复代码：

// 定义通用样式
final customTextButtonStyle = TextButton.styleFrom(
  padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
  elevation: 2,
  shadowColor: Colors.black,
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Color.fromRGBO(85, 63, 48, 1.0),
      width: 1,
      strokeAlign: StrokeAlign.outside
    ),
    borderRadius: BorderRadius.circular(2)
  ),
  backgroundColor: Color.fromRGBO(241, 206, 181, 1.0),
);

// 多处复用
child: TextButton(
  style: customTextButtonStyle,
  onPressed: () {},
  child: const Text("按钮1"),
),
child: TextButton(
  style: customTextButtonStyle,
  onPressed: () {},
  child: const Text("按钮2"),
),

3. 针对多状态自定义样式（可选） #

如果需要给不同状态设置不同样式，也可以通过简洁的逻辑实现，不用写冗余的代码：

backgroundColor: MaterialStateProperty.resolveWith((states) {
  if (states.contains(MaterialState.pressed)) {
    return Colors.grey; // 按下时的背景色
  }
  return Color.fromRGBO(241, 206, 181, 1.0); // 默认背景色
}),

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