Flutter的button的按钮ElevatedButton

最新推荐文章于 2024-05-22 23:45:52 发布

浩星

最新推荐文章于 2024-05-22 23:45:52 发布

阅读量3.6w

点赞数 29

分类专栏： flutter 文章标签： flutter ElevatedButton

本文链接：https://blog.csdn.net/qq_41619796/article/details/115658314

版权

flutter 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

前言：

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。

官网api入口：ButtonStyle

使用方法：他们的使用方法都一样

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

到此为止！

浩星

关注

29
点赞
踩
60

收藏

觉得还不错? 一键收藏
打赏
8
评论
Flutter的button的按钮ElevatedButton

前言： Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。使用方法：他们的使用方法都一样1、TextButton：TextButton( child: Text("爱你"), onPressed: () {},);效果：2、OutlinedButton：OutlinedButton( ...
复制链接

扫一扫