iOS flutter学习之路 day17

都是一些基础内容,可以做一个简单的了解,以后多接触,自然就熟悉了

3.2 按钮

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

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

#ElevatedButton

ElevatedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大,如图所示:

使用ElevatedButton非常简单,如:

ElevatedButton(
  child: Text("normal"),
  onPressed: () {},
);

#TextButton

TextButton即文本按钮,默认背景透明并不带阴影。按下后,会有背景色,如图所示:

使用 TextButton 也很简单,代码如下:

TextButton(
  child: Text("normal"),
  onPressed: () {},
)

#OutlineButton

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

使用OutlineButton也很简单,代码如下:

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

#IconButton

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

代码如下:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

#带图标的按钮

ElevatedButtonTextButtonOutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮,如图3-14所示:

图3-14

代码如下:

ElevatedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
TextButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: _onPressed,
),
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青年没有路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值