美文网首页
第三章: 基础组件 3.2 按钮

第三章: 基础组件 3.2 按钮

作者: QYCD | 来源:发表于2022-01-06 09:18 被阅读0次

跟随《Flutter实战·第二版》学习,建议直接看原书

按钮

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

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

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


image.png

使用ElevatedButton非常简单,如:

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

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


image.png

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

TextButton(
  child: Text("normal"),
  onPressed: () {},
)
OutlineButton -> OutlinedButton
@Deprecated(
    'Use OutlinedButton instead. See the migration guide in flutter.dev/go/material-button-migration-guide). '
    'This feature was deprecated after v1.26.0-18.0.pre.',
  )

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

image.png
OutlinedButton(onPressed: (){}, child: Text("OutlinedButton"))
IconButton

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


image.png

代码如下:

IconButton(onPressed: (){}, icon: Icon(Icons.thumb_up))
带图标的按钮

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


image.png

代码如下:

ElevatedButton.icon(onPressed: (){}, icon: Icon(Icons.send), label: Text("发送")),
OutlinedButton.icon(onPressed: (){}, icon: Icon(Icons.add), label: Text("添加")),
TextButton.icon(
    onPressed: (){

    },
    icon: Icon(Icons.info),
    label: Text("详情"),
)

相关文章

  • 第三章: 基础组件 3.2 按钮

    跟随《Flutter实战·第二版》[https://book.flutterchina.club]学习,建议直接看...

  • flutter Widget

    组件目录 基础组件 Text 文本 Button 按钮a Image 图片 TextField 输入框,TextF...

  • 03-Flutter Widget目录

    组件目录 基础组件Text 文本Button 按钮Image 图片TextField 输入框,TextFormFi...

  • Flutter基础组件<按钮>

    Flutter入门笔记系列文章部分内容来源于《Flutter 实战》,如有侵权请联系删除! Material 组件...

  • 组件相关

    一.组件基础 1.全局组件 2.局部组件 二.组件进阶 1.组件中加入点击事件(点击按钮页面弹出数字“123456...

  • 04-Flutter 基础组件

    基础组件: Text 文本 Button 按钮 Image 图片 TextField 输入框,TextFormFi...

  • Flutter之常用组件

    基础组件 文本组件 Text 用于显示简单样式文本,包含一些控制样式属性 按钮与手势组件 IconButton I...

  • 006Spring注解@Import

    1、简介 @Import快速给容器中导入一个组件。 2、基础类 3、@Import 3.1、取值 3.2、作用域 ...

  • Vue3 过10种组件通讯方式

    本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了 ...

  • Vue3 10多种组件通讯方法

    本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了 ...

网友评论

      本文标题:第三章: 基础组件 3.2 按钮

      本文链接:https://www.haomeiwen.com/subject/bomhcrtx.html