前言：
Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。
官网api入口：ButtonStyle
目录:
overlayColor??高亮色，按钮处于focused, hovered, or pressed时的颜色
更多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）圆角弧度 （这个直接就是）
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),
)
)
),//圆角弧度
),
