Flutter基建 - 按钮全解析_flutter 按钮-CSDN博客

本文详细介绍了Flutter3.13.9中不同类型的按钮，包括普通按钮、图标按钮、动作按钮、开关按钮和ToggleButtons，展示了它们的样式和使用方法，帮助开发者更好地理解和应用Flutter中的按钮组件。

本篇基于Flutter 3.13.9，Dart 3.1.5版本

Flutter 3.13.9 • channel stable • https://github.com/flutter/flutter.git

Framework • revision d211f42860 (2 weeks ago) • 2023-10-25 13:42:25 -0700

Engine • revision 0545f8705d

Tools • Dart 3.1.5 • DevTools 2.25.0

本篇为Flutter基建的第四篇文章，主要介绍Flutter中按钮相关组件，在按钮组件这方面，Flutter为开发者提供了非常全面的样式，总结下来可以分为普通按钮、图标按钮、动作按钮和开关按钮，在日常使用Flutter开发过程中，很多的样式都无需自己在封装一套，可以使用原生提供的这些样式拿来即用，下面我们逐一学习下这样按钮的使用。

普通样式按钮ButtonStyleButton

此系列的按钮是我们日常开发中接触最多的一种样式了，它实现的效果就如它名称一样，一种按钮样式的按钮（哈哈🤣），此样式按钮一共有四种子类，分别为TextButton、ElevatedButton、FilledButton和OutlinedButton，那么我们就进入实战环节看看这些按钮实现的具体效果吧。

TextButton

TextButton是一种文本按钮，用于显示单纯文本并且不加任何边框和阴影修饰的一种按钮，使用起来也是极为简单

TextButton(
  onPressed: () {},
  child: const Text("Text Button"),
),

正常状态下样式：

手指按下时样式：

可以看到TextButton在正常状态下看上去就是一个文本组