(5)、Study Flutter MaterialButton Widget组件学习

这篇文章开始,我将介绍在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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容