Flutter的button的按钮ElevatedButton

前言：

        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）圆角弧度   （这个直接就是）

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

到此为止！