Flutter学习日记之各种按钮的使用

Posted 2021-06-19 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/117487684,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

奋斗的意义，不在于，一定会让你取得多大的成就，只是让你在平凡的日子里，活得比原来的那个自己，更好一点。

今天分享的内容是Flutter的表单组件中的各种按钮的使用，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下：

今天介绍的按钮有以下几个：

• RaisedButton（已弃用）
• ElevatedButton
• FlatButton(已弃用)
• TextButton
• OutlineButton(已弃用)
• OutlinedButton
• ButtonBar（按钮组）
• IconButton
• FloatingActionButton
  其实这些按钮的参数有很多都是相同作用的，希望大家可以进行类比理解

(一)RaisedButton和ElevatedButton

前者在新版本中已经被弃用了，但不代表不能用，官方建议是用后者替代，
效果如下：

旧版与新版的参数有较大的区别，RaisedButton的部分参数如下:

参数	说明
onPressed	点击事件
onLongPress	长按点击事件
textColor	文字颜色
child	内部布局
elevation	阴影大小
color	按钮背景颜色
textColor	文字颜色
splashColor	波纹颜色
shape	处理圆角、边框等样式
splashColor	波纹颜色

代码如下：

            RaisedButton(
              onPressed: () {
                Toast.toast(context, msg: "点击按钮");
              },
              child: Text("RaisedButton(已弃用)"),
              elevation: 10,
              color: Colors.red,
              textColor: Colors.white,
            ),
            RaisedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.search),
              label: Text("带图标的RaisedButton"),
              elevation: 20,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
            ),

ElevatedButton的部分参数如下：

参数	说明
onPressed	点击事件
onLongPress	长按点击事件
style	按钮样式
child	内部组件

RaisedButton使用了不同的参数实现样式，ElevatedButton的样式都在style中使用,使用MaterialStateProperty对各种状态进行判断并返回相应的样式组件,也可以通用一种样式组件,代码如下:

• MaterialStateProperty.resolveWith:不同状态下设置不同的样式
• MaterialStateProperty.all:所有状态下的样式

                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith(
                      (states) {
                        if (states.contains(MaterialState.focused) ||
                            states.contains(MaterialState.pressed)) {
                          return Colors.red;
                        }
                        return Colors.blue;
                      },
                    ),
                    //设置字体颜色的
                    foregroundColor: MaterialStateProperty.all(Colors.white))

 ElevatedButton(
              onPressed: () {},
              child: Text("ElevatedButton(新版本替换RaisedButton的)"),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.grey)),
            ),
            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.search),
              label: Text("带图标的ElevatedButton"),
            ),

(二)FlatButton和TextButton

前者以及弃用，官方建议使用后者,这两个与上述的按钮参数一致，大家可以自己敲敲代码试试看，这里就不做介绍了

(三)OutlineButton和OutlinedButton

这两个组件名称很相似，前者以及弃用，官方建议用后者代替，这个按钮自带边框,类似于一个带有灰色边框没有背景颜色的FlatButton,OutlineButton与之前被弃用的的按钮相比，有个不同的参数，如下：

参数	说明
borderSide	可以设置边框的颜色、粗细

代码如下：

 OutlineButton(
              borderSide: BorderSide(color: Colors.red,width: 1,style: BorderStyle.solid),
              onPressed: () {},
              textColor: Colors.black,
              child: Text("OutlineButton(已弃用)"),
            ),

OutlinedButton与上述两个新版按钮的使用一致，都可以使用style进行样式的统一设置，style中side可以用来设置边框的颜色和粗细,shape可以处理圆角的样式,代码如下:

                   OutlinedButton(
                onPressed: () {},
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.blue),
                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20))),
                  side: MaterialStateProperty.all(
                      BorderSide(color: Colors.black)),
                ),
                child: Text("OutlinedButton(新版本替换OutlineButton)"))

效果如下：

(四)ButtonBar按钮组

顾名思义，即可以放置一组按钮,这里配合IconButton进行说明,IconButton是只有图标的按钮，所以没有child参数,可以放置在AppBar右侧做按钮使用,这里就不介绍参数了，与之前几个被弃用的差不多,代码如下:

                ButtonBar(
                  children: [
                    IconButton(onPressed: () {}, icon: Icon(Icons.search)),
                    IconButton(onPressed: () {}, icon: Icon(Icons.add)),
                    IconButton(onPressed: () {}, icon: Icon(Icons.menu)),
                  ],
                )

效果如下：

（五）FloatingActionButton浮动按钮

在AppBar下定义floatingActionButton参数即可实现浮动按钮，FloatingActionButton部分参数如下:

参数	说明
tooltip	点击时的文字提示
foregroundColor	图标的颜色
backgroundColor	按钮的背景颜色
elevation	阴影的大小
mini	是否缩小化
shape	处理边框样式
onPressed	点击事件
child	内部组件,一般为图标

效果如图:

代码如下：

      floatingActionButton: FloatingActionButton(
        foregroundColor: Colors.white,
        backgroundColor: Colors.red,
        elevation: 10,
        onPressed: () {},
        tooltip: "你好，flutter",
        child: Icon(Icons.add),
        mini: false,
      )

到此为止，Flutte表单控件中的各种按钮组件的使用就介绍完了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!