Flutter 1.22版本新增的Button

移动开发作者： 2024-08-25 08:15:01

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。为什么

1.22版本前的按钮	主题	1.22版本后的按钮	主题
FlatButton	ButtonTheme	TextButton	TextButtonTheme
OutlineButton	ButtonTheme	OutlinedButton	OutlinedButtonTheme
RaisedButton	ButtonTheme	ElevatedButton	ElevatedButtonTheme

TextButton(
  child: Text('TextButton'),)

TextButton(
  child: Text('TextButton'),onPressed: (){},)

const ButtonStyle({
  this.textStyle,//字体
  this.backgroundColor,//背景色
  this.foregroundColor,//前景色
  this.overlayColor,// 高亮色，按钮处于focused,hovered,or pressed时的颜色
  this.shadowColor,// 阴影颜色
  this.elevation,// 阴影值
  this.padding,// padding
  this.minimumSize,//最小尺寸
  this.side,//边框
  this.shape,//形状
  this.mouseCursor,//鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
  this.visualDensity,// 按钮布局的紧凑程度
  this.tapTargetSize,// 响应触摸的区域
  this.animationDuration,//[shape]和[elevation]的动画更改的持续时间。
  this.enableFeedback,// 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
});

TextButton(
  child: Text('TextButton'),onPressed: () {},style: ButtonStyle(
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)),),)

TextButton(
  child: Text('TextButton'),style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),)

TextButton(
                    child: Text('TextButton'),style: ButtonStyle(
                      foregroundColor:
                          MaterialStateProperty.resolveWith((states) {
                        return states.contains(MaterialState.pressed)
                            ? Colors.blue
                            : Colors.red;
                      }),)

MaterialApp(
  title: 'Flutter Demo',theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle()
    ),elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle()
    ),outlinedButtonTheme: OutlinedButtonThemeData(
        style: ButtonStyle()
    )
  ),home: MyHomePage(title: 'Flutter Demo Home Page'),)