第五十六回：如何在Button中同时显示文字和图标

我们在上一章回中介绍了命名路由相关的内容，本章回中将介绍 如何在Button中同时显示文字和图标.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在项目中的使用Button大部分是文字形式的按钮，就是在按钮上面显示文字，通过文字来了解按钮的功能。也有一部分是图标形式的按钮，就是在按钮上面显示图标，通过图标来了解按钮的功能，这两种形式的按钮分别可以用ElevatedButton和IconButton这两种组件来实现。

有时候需要在按钮上面同时显示文字和图标，怎么办？看官莫急，我们可以使用TextButton组件来实现。本章回中将介绍详细的实现方法。

实现方法

我们可以通过TextButton的icon()方法在按钮上面同时显示文字和图标，下面是该组件提供的属性：

• icon属性：主要用来显示按钮上的图标；
• label属性：主要用来显示按钮上的文字；
• onPressed属性：主要用来响应按钮的事件；

我们只需要给前两个属性赋值就可以在按钮上同时显示文字和图标,不过图标只能放在文字前面，不能调整图标和文字和前后顺序，这也算是一个缺点吧。

此外，我们可以通过icon属性来控制图标的大小和颜色（默认的图标颜色和文字颜色相同）。给icon属性赋值时需要使用Icon类的对象，该类提供了相关的属性来控制图标的风格，下面是Icon类中常用的属性：

• size属性：主要用来控制图标的大小；
• color属性：主要用来控制图标的颜色；

示例代码

TextButton.icon(
  icon: Icon(
    Icons.add,
    size: 36.0,
    color: Colors.lightGreen,
  ),
  onPressed: () {},
  label: Text("TextButton"),
),

在上面的代码中，我们实现了一个带有加号图标的按钮，加号的右侧是文字，图标的颜色是绿色，文字的颜色是默认的蓝色。这就是我们想要的"同时带有文字和图标的按钮"。我在这里就不演示程序的运行结果了，建议大家参考Github上ex007文件中的代码自己动手去实践。

同类按钮

在Flutter中除了TextButton可以实现"同时显示文字和图标"的功能外，其它的按钮组件也可以实现该功能，它们的用法十分相似，都是借助组件自带的icon方法来实现此功能，我在这里就不一一介绍了，下面是示例代码，请大家参考：

OutlinedButton.icon(
    onPressed: (){},
    icon: Icon(Icons.delete),
    label:Text("Delete"),
),
ElevatedButton.icon(
    onPressed: (){},
    icon: Icon(Icons.search_rounded),
    label: Text('search'),
),

看官们，关于"如何在Button中同时显示文字和图标"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!