我们在上一章回中介绍了命名路由相关的内容，本章回中将介绍 如何在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方法来实现此功能，我在这里就不一一介绍了，下面是示例代码，请大家参考：文章来源：https://www.toymoban.com/news/detail-491214.html
OutlinedButton.icon(
onPressed: (){},
icon: Icon(Icons.delete),
label:Text("Delete"),
),
ElevatedButton.icon(
onPressed: (){},
icon: Icon(Icons.search_rounded),
label: Text('search'),
),
看官们，关于"如何在Button中同时显示文字和图标"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!文章来源地址https://www.toymoban.com/news/detail-491214.html
到了这里，关于第五十六回：如何在Button中同时显示文字和图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
