如何创建图片按钮

标签：const 创建 IconButton Material3 风格按钮 Icon filled 图片

文章目录

1. 概念介绍
2. 使用方法
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"如何修改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"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

标签：const,创建,IconButton,Material3,风格,按钮,Icon,filled,图片
From： https://blog.csdn.net/talk_8/article/details/141500769