前言：

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的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),
            )
        )
    ),//圆角弧度


  ),

————————————————

版权声明：本文为CSDN博主「浩星」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/qq_41619796…