Flutter MaterialButton组件详细概述

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。


目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


MaterialButton 是Material 风格按钮,小编也将这里的属性配置使用录制成了视频,大家可以通过视频来看各种动态效果。

【Flutter组件精讲【57】MaterialButton 一个Material风格的按钮】

【Flutter组件精讲【58】MaterialButton 点击事件与高亮的巧妙】

【Flutter组件精讲【61】MaterialButton 基本使用 】

【Flutter组件精讲【60】MaterialButton 水波纹颜色】

【Flutter MaterialButton文本样式便捷开发设置】

【Flutter按钮MaterialButton设置圆角矩形边框】

【Flutter应用开发核心基础MaterialButton个性化下边框】


当然编也是代码控,直接来一个全属性配置说明代码如下:

MaterialButton buildMaterialButton() {
  return MaterialButton(
      ///按钮的背景
      color: Colors.blue,

      child: Text("按钮"),
      ///点击回调函数
      onPressed: (){
        print("按钮点击");
      },
      ///按钮按下时回调 value = true
      ///按钮抬起时回调 value = false
      ///要先于 onPressed
      onHighlightChanged: (value){
        print("按钮点击 Hight $value");
      },
      ///定义按钮的基色,以及按钮的最小尺寸
      ///ButtonTextTheme.accent 按钮显示的文本 ThemeData.accentColor(MaterialApp组件中的theme属性配制的)
      ///ButtonTextTheme. normal 按钮显示的文本 黑色或者白色 具体取决于ThemeData.brightness Brightness.dark
      ///ButtonTextTheme.primary 按钮的显示的文本 ThemeData.primaryColr
      textTheme: ButtonTextTheme.primary,
      ///配制按钮上文本的颜色
      textColor: Colors.deepOrange,
      ///未设置点击时的背景颜色
      disabledColor:Colors.yellow ,
      ///按钮点击下的颜色
      highlightColor:Colors.deepPurple,
      ///水波方的颜色
      splashColor: Colors.green,
      ///按钮的阴影
      elevation: 10,
      ///按钮按下时的阴影高度
      highlightElevation: 20,
      ///未设置点击时的阴影高度
      disabledElevation: 5.0,
      ///用来设置按钮的边框的样式
      /// Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid) 四个边框
      /// Border(bottom: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid)) 可以分别设置边框
      /// 用来设置底部边框的
      /// UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),borderRadius: BorderRadius.circular(10))
      /// 用来设置圆角矩形边框
      ///   RoundedRectangleBorder(side: BorderSide.none,borderRadius: BorderRadius.all(Radius.circular(20)))
      ///   用来设置圆形边框
      ///   CircleBorder(side: BorderSide(width: 2,color:Colors.red )),
      ///   椭圆形边框 StadiumBorder(side: BorderSide(width: 2,color: Colors.red))
      ///   设置 多边形 BeveledRectangleBorder(side: BorderSide(width: 2,color: Colors.red),borderRadius: BorderRadius.all(Radius.circular(20)))
      ///
      shape: Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),
      height: 44.0,
      minWidth: 140,
    );
}

配置的属性比较全,运行出的效果如下图所示,大家可以根据实际项目开发灵活配置使用。
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页