Flutter 1.22版本新增的Button

╰+哭是因爲堅強的太久メ 2022-11-22 10:13 165阅读 0赞

![20201103215636606.png][]

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

为什么会新增 **Button**？因为想要将以前的按钮调整为统一的外观比较麻烦，因此以前经常使用自定义的按钮，而新增的按钮解决了此类问题，可以非常方便的设置整体外观。

<table> 
 <thead> 
  <tr> 
   <th>1.22版本前的按钮</th> 
   <th>主题</th> 
   <th>1.22版本后的按钮</th> 
   <th>主题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>FlatButton</td> 
   <td>ButtonTheme</td> 
   <td>TextButton</td> 
   <td>TextButtonTheme</td> 
  </tr> 
  <tr> 
   <td>OutlineButton</td> 
   <td>ButtonTheme</td> 
   <td>OutlinedButton</td> 
   <td>OutlinedButtonTheme</td> 
  </tr> 
  <tr> 
   <td>RaisedButton</td> 
   <td>ButtonTheme</td> 
   <td>ElevatedButton</td> 
   <td>ElevatedButtonTheme</td> 
  </tr> 
 </tbody> 
</table>

样式对比：

![20201103215637124.png][]

外观上并没有很大的不同，但TextButton、OutlinedButton、ElevatedButton 将外观属性集合为一个 **ButtonStyle**，非常方便统一控制。

TextButton、OutlinedButton、ElevatedButton 这3个按钮的用法和属性完全相同，下面以 **TextButton** 为例。

简单使用：

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

![20201103215637385.png][]

当 **onPressed** 不设置或者设置为 null 时，按钮为不可用状态。

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

![20201103215637750.png][]

**onPressed** 为点击回调，**onLongPress** 为长按回调。

下面是最重要的属性 **ButtonStyle**，一切外观都是通过这个属性进行控制，属性如下：

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。
    });

这些属性的用法也和以前的不一样，比如 textStyle 并不是直接设置 TextStyle，下面设置字体：

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

![20201103215638362.png][]

注意：字体颜色的设置不通过**textStyle** 设置，而是通过 **foregroundColor**：

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

![20201103215639188.png][]

根据按钮的状态改变字体颜色：

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

![20201103215639579.png][]

其他属性用法和上面类似，不在一一介绍。

进行全局控制：

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'),
    )

**ButtonStyle** 内的属性配置和单个按钮的用法是一致的。

通过上面的介绍，建议使用 **TextButton、OutlinedButton、ElevatedButton 替换 FlatButton、OutlineButton、RaisedButton**。

## 交流 ##

老孟Flutter博客（330个控件用法+实战入门系列文章）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20201103215636606.png]: /images/20221120/511f1323db0043db9f65fd761a7db47d.png
[20201103215637124.png]: https://img-blog.csdnimg.cn/20201103215637124.png
[20201103215637385.png]: https://img-blog.csdnimg.cn/20201103215637385.png
[20201103215637750.png]: https://img-blog.csdnimg.cn/20201103215637750.png
[20201103215638362.png]: https://img-blog.csdnimg.cn/20201103215638362.png
[20201103215639188.png]: https://img-blog.csdnimg.cn/20201103215639188.png
[20201103215639579.png]: https://img-blog.csdnimg.cn/20201103215639579.png
[http_laomengit.com]: http://laomengit.com