(5)、Study Flutter MaterialButton

这篇文章开始，我将介绍在MaterialButton，它包含了三个子类：RaisedButton、OutlineButton、FlatButton。

MaterialButton属性学习

首先看看MaterialButton有哪些属性。

QQ截图20190108114256.png

• onPressed：被@required标记，必须。表示按下的点击事件，如果为空，则按钮表示禁用。
• child：设置一个子widget，一般是它给按钮设置一个文本内容。
• textTheme：按钮上文本的主题。
• textColor ：按钮文字颜色，该属性要求onPressed不能为null。
  -disabledTextColor：未选中时，文本颜色。
  -color：填充的颜色，可理解为背景颜色，该属性要求onPressed不能为null。

 child: MaterialButton(
            onPressed: null,
            child: Text("确定"),
            color: Colors.amber,
            textColor: Colors.red,
            disabledTextColor: Colors.lightBlue,
          ),

QQ截图20190108140442.png

-disabledColor：禁用按钮时，按钮的背景颜色。和color属性刚好相反。
-colorBrightness：按钮的主题亮度，灰暗、明亮。
-elevation：控制Z轴的高度，用于实现按钮周围阴影。
-highlightElevation：高亮是Z轴的高度，需要按钮可用，该属性要求onPressed不能为null。
-disabledElevation：按钮不可用时，Z轴的高度，用于实现按钮周围阴影。
-padding：按钮内部子Widget填充方式
-shape：定义按钮的形状
-clipBehavior：当内部widget溢出边界时，剪切方式。
-materialTapTargetSize：配置tap目标的最小大小
-animationDuration：定义动画的执行时间。
-minWidth：最小宽度
-height：高度

 body: Column(
          children: <Widget>[
            RaisedButton(
              child: Text(
                "RaisedButton",
                style: TextStyle(fontSize: 20.0),
              ),
              textColor: Colors.white,
              color: Colors.blue[900],
              onPressed: logPrint,
              //按下时，背景高亮颜色。即onPressed不为null
              highlightColor: Colors.blue,
              //不可点击时，背景颜色。即onPressed为null
              disabledColor: Colors.amberAccent[100],
              //触摸按钮时，类似水波纹扩散的颜色
              splashColor: Colors.deepPurpleAccent,
            ),
            FlatButton(
              child: Text(
                "FlatButton",
              ),
              //文本颜色
              textColor: Colors.amber,
              onPressed: logPrint,
              //按下时，背景高亮颜色。即onPressed不为null
              highlightColor: Colors.blue,
              //不可点击时，背景颜色。即onPressed为null
              disabledColor: Colors.amberAccent[100],
              //触摸按钮时，类似水波纹扩散的颜色
              splashColor: Colors.deepPurpleAccent,
            ),
            OutlineButton(
              child: Text(
                "OutlineButton",
              ),
              //文本颜色
              textColor: Colors.amber,
              onPressed: logPrint,
              //不可点击时，边框颜色。即onPressed为null
              disabledBorderColor: Colors.purpleAccent,
              //可点击时，边框颜色。即onPressed为null
              highlightedBorderColor: Colors.teal,
            ),
          ],
        ),

void logPrint() {
    print("hhhh");
  }

GIF.gif