第一百七十回 Material3中的IconButton


我们在上一章回中介绍了"如何修改NavigationBar组件的形状"相关的内容,本章回中将 介绍IconButtion组件.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍Button时介绍过IconButon,它表示带有图标的Button,我们在本章回中的介绍的IconButton是指Material3中新添加的IconButton,它和之前介绍的IconButton类似,只是在原IconButton的基础上提供了各种风格,接下来我们将详细介绍它们的使用方法。

2. 使用方法

Material3在原IconButton的基础上提供了三种风格的IconButton,接下来我们将分别介绍这三种风格的IconButton.

2.1 filled风格

该风格是一种填充风格,它会使用Material3中的PrimaryColor来填充,同时把Icon的颜色设置为白色。官方为了方便开发人员使用,在SDK中提供了专门的filled方法来创建此风格的按钮:IconButton.filled().我们将在后面的小节中通过示例代码来演示如何使用该方法。

2.2 filledTonal风格

该风格是一种填充风格,它会使用Material3中的PrimaryColor来填充,不过颜色比filled风格要淡一些,同时把Icon的颜色设置为黑色。官方为了方便开发人员使用,在SDK中提供了专门的filledTonal方法来创建此风格的按钮:IconButton.filledTonal().我们将在后面的小节中通过示例代码来演示如何使用该方法。

该风格和filled风格类似,该风格重在突出Icon,因为Icon是深色而背景是浅色的,而filled风格重在突出背景,因为背景是深色的,而Icon是浅色的。

2.3 outlined风格

该风格是一种空心风格,它会在Icon外层包裹一个边框,边框的颜色和Icon的颜色相同,都是深黑色。官方为了方便开发人员使用,在SDK中提供了专门的outlined方法来创建此风格的按钮:IconButton.outlined().我们将在后面的小节中通过示例代码来演示如何使用该方法。

注意:我们在这里介绍的颜色和风格都是指Material3的默认风格,如果大家修改了默认风格或者主题颜色,那么出现的颜色和风格会与这里介绍的不同。

3. 代码与效果

3.1 示例代码

介绍完各种风格的IconButton后,我们通过具体的代码来演示它们的使用方法。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    IconButton(onPressed: (){}, icon: const Icon(Icons.add)),
    IconButton.filled(onPressed: (){}, icon:const Icon(Icons.add)),
    IconButton.filledTonal(onPressed: (){}, icon: const Icon(Icons.add)),
    IconButton.outlined(onPressed: (){}, icon: const Icon(Icons.add)),
    IconButton.filled(onPressed: (){}, icon: const Icon(Icons.add),
      //控制图标的颜色
      color: Colors.redAccent,
      //控制Icon的背景颜色,形状
      style: IconButton.styleFrom(
      backgroundColor: Colors.red,
      //控制星形角的数量,默认是5
      shape:const StarBorder(),
      ),
    ),
    IconButton.filled(onPressed: (){}, icon: const Icon(Icons.face),
      color: Colors.blue ,
      style: IconButton.styleFrom(
      backgroundColor: Colors.yellow,
      shape:const StarBorder(points: 6),
      ),
    ),
  ],
),

上面的示例代码中演示了各种风格IconButon的用法,其实它们在本质上的用法相同,详细如下:

  • 通过icon属性来控制图标;
  • 通过onPressed属性来响应按钮的点击事件;
  • 通过style属性来修改按钮的形状和背景颜色;

我们在代码中只演示了IconButton中常用的属性,还有其它的属性有待大家去发掘,比如Icon的对齐与边距等。此外,该代码需要在代码中激活useMaterial3属性,不然无法使用这些IconButton.

3.2 运行效果

我们把各种风格的IconButton放在了一行中,第一个是默认的风格,中间的是Material3中提供的三种风格,最后两个是自定义的风格,主要修改了IconButton的形状和背景颜色。

我们创建了一个红色的五角星和一个面带微笑的小太阳。下面是程序的运行效果图,请大家参考:

在这里插入图片描述

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 在Material3中提供了三种不同风格的IconButton;
  • Material3为不同风格的IconButton提供了不同的方法,这些方法的方法完全相同;
  • IconButton的使用方法主要包含三个方面,详细的内容可以参考上面小节中的总结;
  • 普通的Button也有这三种风格,只不过它们是独立的按钮,而不是通过方法来实现;

看官们,与"Material3中的IconButton"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

talk_8

真诚赞赏,手有余香

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

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

打赏作者

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

抵扣说明:

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

余额充值