Flutter基础组件之按钮

1.Material组件库中的按钮

Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面统一介绍这些属性。另外,所有Material 库中的按钮都有如下相同点:

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

RaisedButton

RaisedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大。

FlatButton

FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色。

OutlineButton

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

IconButton

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

使用示例代码如下:

Column(
          children: [
            RaisedButton(
              child: Text("raisedButton"),
              onPressed: () {
                print("raisedButton");
              },
            ),
            FlatButton(
              child: Text("normal"),
              onPressed: () {},
            ),
            OutlineButton(
              child: Text("normal"),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.thumb_up),
              onPressed: () {},
            ),
          ],

在这里插入图片描述

带图标的按钮

RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮。示例代码如下:

Column(
              children: [
                RaisedButton.icon(
                  icon: Icon(Icons.send),
                  label: Text("发送"),
                  onPressed: () {
                    print("发送");
                  },
                ),
                OutlineButton.icon(
                  icon: Icon(Icons.add),
                  label: Text("添加"),
                  onPressed: () {
                    print("添加");
                  },
                ),
                FlatButton.icon(
                  icon: Icon(Icons.info),
                  label: Text("详情"),
                  onPressed: () {
                    print("详情");
                  },
                ),
              ],
            )

在这里插入图片描述
2.自定义按钮外观

按钮外观可以通过其属性来定义,不同按钮属性大同小异,这里以FlatButton为例,介绍一下常见的按钮属性,详细的信息可以查看API文档。

const FlatButton({
  ...  
  @required this.onPressed, //按钮点击回调
  this.textColor, //按钮文字颜色
  this.disabledTextColor, //按钮禁用时的文字颜色
  this.color, //按钮背景颜色
  this.disabledColor,//按钮禁用时的背景颜色
  this.highlightColor, //按钮按下时的背景颜色
  this.splashColor, //点击时,水波动画中水波的颜色
  this.colorBrightness,//按钮主题,默认是浅色主题 
  this.padding, //按钮的填充
  this.shape, //外形
  @required this.child, //按钮的内容
})

接下来,咱就定义一个背景蓝色,4角都是圆角的按钮:

FlatButton(
                  color: Colors.blue,
                  highlightColor: Colors.blue[700],
                  colorBrightness: Brightness.dark,
                  splashColor: Colors.grey,
                  child: Text("Submit"),
                  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                  onPressed: () {},
                ),

运行之后点击,发现就和Android原生的按钮效果一样了。如果觉得没有质感的话,可以选择自定义RaisedButton。
RaisedButton默认有配置阴影:

const RaisedButton({
  ...
  this.elevation = 2.0, //正常状态下的阴影
  this.highlightElevation = 8.0,//按下时的阴影
  this.disabledElevation = 0.0,// 禁用时的阴影
  ...
}

在Material 组件库中,我们会在很多组件中见到elevation相关的属性,它们都是用来控制阴影的,这是因为阴影在Material设计风格中是一种很重要的表现形式。(→_→)
至此,我们简单地学习了按钮的使用。继续加油,奥利给!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值