Flutter基础组件Button

Material组件库中的按钮

Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等

所有Material 库中的按钮都有如下相同点:
按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁 用状态不响应用户点击。

RaisedButton

默认带有阴影和灰色背景。按下后,阴影会变大

FlatButton

默认背景透明并不带阴影。按下后,会有背景色

OutlineButton

默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)

IconButton

是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景

body: Center(
  child: Column(
    children: <Widget>[
      RaisedButton(onPressed: (){print("RaiseButton");},child: Text("RaiseButton"),),
      FlatButton(onPressed: (){print("FlatButton");}, child: Text("FlatButton")),
      OutlineButton(onPressed: (){print("OutlineButton");}, child: Text("OutlineButton")),
      IconButton(onPressed: (){print("IconButton");}, icon: Icon(Icons.account_circle)),
    ],
  ),
),

在这里插入图片描述

RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮

 RaisedButton.icon(onPressed: (){}, icon: Icon(Icons.add), label: Text("加")),
 FlatButton.icon(onPressed: (){}, icon: Icon(Icons.settings), label: Text("设置")),
 OutlineButton.icon(onPressed: (){}, icon: Icon(Icons.access_alarm), label: Text("闹钟")),

在这里插入图片描述

自定义按钮外观

 RaisedButton(
   onPressed: (){},
   child: Text("Commit"),
   color: Colors.blue,//背景色
   highlightColor: Colors.purple,//按钮按下的背景颜色
   splashColor: Colors.red,//点击时水波动画中水波的颜色
   colorBrightness: Brightness.dark,//按钮主题
   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),//shape
 )

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值