flutter|Flutter的button的按钮ElevatedButton ElevatedButton|flutter

前言：
Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。
官网api入口：ButtonStyle
目录: 更多button按钮入口（带图标，或者就是一个图标的按钮）
使用方法：他们的使用方法都一样
1、 TextButton：
效果：
2、 OutlinedButton：
效果：
3、ElevatedButton
效果：
属性API：
1、点击事件 onPressed
2、长按事件 onLongPress
3、属性：
textStyle字体
backgroundColor背景颜色
foregroundColor字体颜色
overlayColor高亮色，按钮处于focused, hovered, or pressed时的颜色
side边框
shadowColor 阴影颜色
elevation阴影值
shape形状-可设置圆角弧度

更多button按钮入口（带图标，或者就是一个图标的按钮）
使用方法：他们的使用方法都一样 1、 TextButton：

TextButton( child: Text("爱你"), onPressed: () {}, );

效果：

文章图片

2、 OutlinedButton：

OutlinedButton( child: Text("爱你"), onPressed: () {}, );

效果：

文章图片

3、ElevatedButton

ElevatedButton( child: Text("爱你"), onPressed: () {}, );

效果：

文章图片

属性API： 1、点击事件 onPressed

ElevatedButton( child: Text("爱你"), onPressed: () { print('我被点击了'); }, );

2、长按事件 onLongPress

ElevatedButton( child: Text("爱你"), onLongPress : () { print('我被长按了'); }, );

3、属性：

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

textStyle字体

ElevatedButton( child: Text("爱你"), style: ButtonStyle( textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16)),//字体 ), onPressed: () { print('我被点击了'); }, )

backgroundColor背景颜色

ElevatedButton( child: Text("爱你"), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Color(0xffEDFCF5)),//背景颜色 ), onPressed: () { print('我被点击了'); }, )

foregroundColor字体颜色

ElevatedButton( child: Text("爱你"), style: ButtonStyle( foregroundColor: MaterialStateProperty.all(Color(0xff31C27C)),//字体颜色 ), onPressed: () { print('我被点击了'); }, )

overlayColor高亮色，按钮处于focused, hovered, or pressed时的颜色

ElevatedButton( child: Text("爱你"), style: ButtonStyle( overlayColor: MaterialStateProperty.all(Color(0xff31C27C)),//字体颜色 ), onPressed: () { print('我被点击了'); }, )

side边框

ElevatedButton( child: Text("爱你"), style: ButtonStyle( side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffffffff))),//边框 ), onPressed: () { print('我被点击了'); }, )

shadowColor 阴影颜色

ElevatedButton( child: Text("爱你"), style: ButtonStyle( shadowColor: MaterialStateProperty.all(Colors.red), ), onPressed: () { print('我被点击了'); }, )

elevation阴影值

ElevatedButton( child: Text("爱你"), style: ButtonStyle( elevation: MaterialStateProperty.all(10),//阴影值 ), onPressed: () { print('我被点击了'); }, )

shape形状-可设置圆角弧度
（1）棱形，如果不设置边框，可以实现圆角弧度那种效果，设置边框就是棱形

文章图片

ElevatedButton( child: Text("审核完成"), style: ButtonStyle( side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框 shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(8))),//圆角弧度 ), onPressed: () { print('我被点击了'); }, )

文章图片

ElevatedButton( child: Text("学习报告"), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Color(0xffFFF8E5)),//背景颜色 foregroundColor: MaterialStateProperty.all(Color(0xffB85F23)),//字体颜色 overlayColor: MaterialStateProperty.all(Color(0xffFFF8E5)),// 高亮色 shadowColor: MaterialStateProperty.all( Color(0xffffffff)),//阴影颜色 elevation: MaterialStateProperty.all(0),//阴影值 textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)),//字体 side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffffffff))),//边框 shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(8))),//圆角弧度 ), onPressed: () {}, );

（2）圆形

文章图片

ElevatedButton( child: Text("审"), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Color(0xffffffff)),//背景颜色 foregroundColor: MaterialStateProperty.all(Color(0xff5E6573)),//字体颜色 overlayColor: MaterialStateProperty.all(Color(0xffffffff)),// 高亮色 shadowColor: MaterialStateProperty.all( Color(0xffffffff)),//阴影颜色 elevation: MaterialStateProperty.all(0),//阴影值 textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)),//字体 side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框 shape: MaterialStateProperty.all( CircleBorder( side: BorderSide( //设置界面效果 color: Colors.green, width: 280.0, style: BorderStyle.none, ) ) ),//圆角弧度), onPressed: () {}, )

（3）圆角弧度（这个直接就是）
【flutter|Flutter的button的按钮ElevatedButton】

文章图片

ElevatedButton( child: Text("审核完成"), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Color(0xffffffff)),//背景颜色 foregroundColor: MaterialStateProperty.all(Color(0xff5E6573)),//字体颜色 overlayColor: MaterialStateProperty.all(Color(0xffffffff)),// 高亮色 shadowColor: MaterialStateProperty.all( Color(0xffffffff)),//阴影颜色 elevation: MaterialStateProperty.all(0),//阴影值 textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)),//字体 side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框shape: MaterialStateProperty.all( StadiumBorder( side: BorderSide( //设置界面效果 style: BorderStyle.solid, color: Color(0xffFF7F24), ) ) ),//圆角弧度),

参考文档1：https://blog.csdn.net/mengks1987/article/details/109480289
参考文档2：https://blog.csdn.net/weixin_34166847/article/details/91401446
到此为止！