文章目录
我们在上一章回中介绍了"如何修改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/140590278