第一百七十回 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