如何从 RaisedButton 创建 ElevatedButton？

Question

RaisedButton 中有很多属性，我在 ElevatedButton 中找不到它们的等价物。那么，如何将 RaisedButton（具有所有属性）转换或复制到新的 ElevatedButton？

喜欢：

RaisedButton(
  onPressed: () {},
  color: Colors.indigoAccent,
  disabledColor: Colors.indigo,
  textColor: Colors.white,
  disabledTextColor: Colors.grey,
  hoverColor: Colors.pinkAccent,
  splashColor: Colors.black,
  elevation: 12.0,
  padding: EdgeInsets.all(20),
  shape: StadiumBorder(),
  child: Text('Button'),
)

Answer 1

您可以构造一个名为 MyElevatedButton 的新 class。

class MyElevatedButton extends StatelessWidget {
  final VoidCallback? onPressed;
  final Widget child;
  final Color? color;
  final Color? disabledColor;
  final Color? textColor;
  final Color? disabledTextColor;
  final Color? hoverColor;
  final Color? splashColor;
  final double? elevation;
  final double? disabledElevation;
  final EdgeInsetsGeometry? padding;
  final OutlinedBorder? shape;

  MyElevatedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.color,
    this.disabledColor,
    this.textColor,
    this.disabledTextColor,
    this.hoverColor,
    this.splashColor,
    this.elevation,
    this.disabledElevation,
    this.padding,
    this.shape,
  }) : super(key: key);

  bool _isPressed(Set<MaterialState> states) => states.contains(MaterialState.pressed);
  bool _isDisabled(Set<MaterialState> states) => states.contains(MaterialState.disabled);
  bool _isHovered(Set<MaterialState> states) => states.contains(MaterialState.hovered);

  @override
  Widget build(BuildContext context) {
    final style = ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
        if (_isDisabled(states)) {
          return disabledColor;
        } else if (_isHovered(states)) {
          return hoverColor;
        }
        return color;
      }),
      foregroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
        if (_isDisabled(states)) return disabledTextColor;
      }),
      overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
        if (_isPressed(states)) return splashColor;
      }),
      elevation: MaterialStateProperty.resolveWith<double?>((states) {
        if (_isDisabled(states)) return disabledElevation;
        return elevation;
      }),
      shape: MaterialStateProperty.all<OutlinedBorder?>(shape),
      padding: MaterialStateProperty.all<EdgeInsetsGeometry?>(padding),
    );

    return ElevatedButton(
      onPressed: onPressed,
      style: style,
      child: child,
    );
  }
}

这是示例代码（一个是 RaisedButton，另一个是 ElevatedButton，使用相同的属性）

@override
Widget build(BuildContext context) {
  final onPressed = () {};
  final child = Text('Button');
  final color = Colors.indigoAccent;
  final disabledColor = Colors.indigo;
  final textColor = Colors.white;
  final disabledTextColor = Colors.grey;
  final hoverColor = Colors.pinkAccent;
  final splashColor = Colors.black;
  final elevation = 8.0;
  final disabledElevation = 0.0;
  final shape = StadiumBorder();
  final padding = EdgeInsets.all(12);
  
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('RaisedButton'),
          SizedBox(height: 4),
          RaisedButton(
            onPressed: onPressed,
            color: color,
            disabledColor: disabledColor,
            textColor: textColor,
            disabledTextColor: disabledTextColor,
            hoverColor: hoverColor,
            splashColor: splashColor,
            elevation: elevation,
            padding: padding,
            shape: shape,
            child: child,
          ),
          SizedBox(height: 30),
          Text('ElevatedButton'),
          SizedBox(height: 4),
          MyElevatedButton(
            onPressed: onPressed,
            color: color,
            disabledColor: disabledColor,
            textColor: textColor,
            disabledTextColor: disabledTextColor,
            hoverColor: hoverColor,
            splashColor: splashColor,
            elevation: elevation,
            disabledElevation: disabledElevation,
            padding: padding,
            shape: shape,
            child: child,
          ),
        ],
      ),
    ),
  );
}

我介绍了大部分常用属性，但不是全部，您可以随意添加自己的属性，因为所有属性的工作方式都相似。唯一不可复制的是 RaisedButton 的 highlightColor，因为 overlayColor 的集合一次只反映一个属性，并且优先于 [=18] =].

禁用状态：

Answer 2

您应该改用 MaterialApp() 的 theme 属性和相应的按钮主题，例如：

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            textStyle: TextStyle(fontSize: 20.0)
        )
    ),
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        primary: Colors.black,
        textStyle: TextStyle(
          fontWeight: FontWeight.bold
        )
      )
   ),
 ),
)

对于个别按钮样式，您可以使用：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(30.0, 36.0),
    primary: Colors.green,
    padding: EdgeInsets.all(15.0),
    shape: RoundedRectangleBorder(
       borderRadius: new BorderRadius.circular(10.0)
    ),
  ),
),

另见New Buttons and Button Themes

如何从 RaisedButton 创建 ElevatedButton？

How to create ElevatedButton from RaisedButton?

dart

flutter

dart-null-safety