官网api入口：ButtonStyle

更多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),
                )
            )
        ),//圆角弧度
      ),