Flutter 从零开始 004 按钮组件

举报
半身风雪 发表于 2022/06/30 10:23:31 2022/06/30
【摘要】 1、按钮Material 组件库中,为我们提供了多种按钮组件,如 ElevatedButton 、TextButton 、 OutlinedButton 等另外,Material 库中所有的按钮组件都有一个相同的特性,那就是水波纹动画效果,还有一个onPressed 属性,用来设置按钮的点击回调。ElevatedButton 即漂浮按钮,它带有阴影和灰色的背景,按下后,阴影会变大,如下图El...

1、按钮

Material 组件库中,为我们提供了多种按钮组件,

如 ElevatedButton 、TextButton 、 OutlinedButton 等

另外,Material 库中所有的按钮组件都有一个相同的特性,那就是水波纹动画效果,还有一个onPressed 属性,用来设置按钮的点击回调。

ElevatedButton 即漂浮按钮,它带有阴影和灰色的背景,按下后,阴影会变大,如下图
在这里插入图片描述

ElevatedButton 按钮的使用非常的简单

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

TextButton 即文本按钮,默认背景透明,并不带阴影,按下的时候,会有一个背景色,如下图
请添加图片描述

TextButton 的使用也非常的简单

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

OutlinedButton 默认会有一个边框,不带阴影且背景透明。按下后,边框的颜色会变亮、同时会出现背景和阴影效果,如下图

在这里插入图片描述

OutlinedButton 的使用也非常的简单

            OutlinedButton(
              onPressed: () {},
              child: Text("OutlinedButton"),
            )

IconButton 是一个图标按钮,可以生成一个可电影的icon ,不包括文字,没有默认背景,点击后会出现背景动画,如下图
在这里插入图片描述

IconButton 的使用也非常的简单

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

带图标的按钮

其实我们上述的这些按钮,大部分都可以说是一个可带图标的按钮,
因为ElevatedButton 、 TextButton、OutlinedButton 都有一个icon构造函授,通过它可以轻松的创建带图标的按钮,如下图
在这里插入图片描述

代码如下:

            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.send),
              label: Text("ElevatedButton"),
            ),

            TextButton.icon(
              onPressed: (){},
              icon: Icon(Icons.safety_divider),
              label: Text("TextButton"),
            ),

            OutlinedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.abc),
              label: Text("OutlinedButton"),
            )

下一节我将为大家介绍 图片及Icon 的使用

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。