Flutter 学习之旅(十三) 基础控件RaisedBu

RaisedButton

平时用的比较多的就是关于他的不同状态下的背景颜色的使用

class _TsmRaisedButtonState extends State<TsmRaisedButtonPage> {
  var enable = false;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton  学习'),
          centerTitle: true,
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              /**
               * RaisedButton  用来用去也就是状态不一样背景色和字体颜色不一样,
               */
              RaisedButton(
                onPressed: () {
                  setState(() {
                    enable = !enable;
                  });
                },
                child: Text("按下颜色和水波纹同时设置的时候貌似有冲突"),

                ///字体颜色
                textColor: Colors.pink,

                ///背景颜色
                color: Colors.orange,
//                highlightColor: Color(0xff00ff00),///按下时背景颜色
                ///水波纹颜色
                splashColor: Colors.yellowAccent,

                ///阴影z轴的高度
                elevation: 3,
              ),

              /**
               * https://api.flutter.dev/flutter/material/RaisedButton-class.html
               * 上面这个链接就是介绍RaisedButton 这个按钮如果没有设置  onPressed  或者 没有设置 noLongPressed 就是disable 状态这里演示一下
               */
              RaisedButton(
                child: Text("disabled状态下颜色设置"),
                onPressed: enable
                    ? () {
                        printString("正常状态");
                      }
                    : null,

                ///字体颜色
                textColor: Colors.purpleAccent,

                ///水波纹颜色
                splashColor: Colors.blueAccent,

                ///背景颜色
                color: Colors.orange,

                ///不可点击的文本颜色
                disabledTextColor: Colors.greenAccent,

                ///不可点击的背景颜色
                disabledColor: Colors.redAccent,

                ///阴影  z轴高度
                elevation: 3,
              ),
              /**
               * 多了一个图片,方便使用
               */
              RaisedButton.icon(
                  onPressed: () {},
                  icon: Icon(
                    Icons.access_time,
                    color: Colors.white,
                  ),
                  textColor: Colors.pink,
                  color: Colors.orange,
//                highlightColor: Color(0xff00ff00),
                  splashColor: Colors.yellowAccent,
                  elevation: 3,
                  label: Text('牛x了伙计')),
            ],
          ),
        ),
      );
}

GIF 2020-8-17 10-54-22.gif

disable

你会发现这个状态在代码中是没有体现的,好好看一下源码中的例子,你会发现这么一句话
If [onPressed] and [onLongPress] callbacks are null, then the button will be disabled and by
default will resemble a flat button in the [disabledColor].
大致意思就是如果不设置 [onPressed] and [onLongPress] 他就是disable 状态了

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter