Flutter基建 – 按钮全解析

本篇基于Flutter 3.13.9，Dart 3.1.5版本

Flutter 3.13.9 • channel stable • github.com/flutter/flu…

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开发过程中，许多的款式都无需自己在封装一套，能够运用原生供给的这些款式拿来即用，下面咱们逐一学习下这样按钮的运用。

Flutter基建 – Dart根底类型

Flutter基建 – Dart办法和类

Flutter基建 – 文本组件

Flutter基建 – 按钮全解析

一般款式按钮ButtonStyleButton

此系列的按钮是咱们日常开发中触摸最多的一种款式了，它完成的作用就如它称号相同，一种按钮款式的按钮（哈哈），此款式按钮一共有四种子类，别离为TextButton、ElevatedButton、FilledButton和OutlinedButton，那么咱们就进入实战环节看看这些按钮完成的详细作用吧。

TextButton

TextButton是一种文本按钮，用于显现单纯文本而且不加任何边框和暗影润饰的一种按钮，运用起来也是极为简略

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

正常状况下款式：

手指按下时款式：

能够看到TextButton在正常状况下看上去便是一个文本组件，没有其它任何润饰，仅仅在手指按下去之后会有个圆润的布景暗影。

TextButton有一个必传参数便是onPressed，用于检测点击事情，能够在此事情回调中处理点击事情的详细逻辑；onLongPressed则是用于检测长按事情。

ElevatedButton

ElevatedButton能够理解为TextButton的提高版，加上了布景色彩和带弧度的边框，而且在手指按下去之后，它的布景色会加深，有个显着的差异。

ElevatedButton(
  onPressed: () {},
  child: const Text('ElevatedButton'),
),

正常状况下款式：

手指按下时款式：

FilledButton

FilledButton为填充款式的按钮，说白了便是给布景上个色，这种款式在手指点击时给人的观感不是很强烈，只有微弱的色彩变化，咱们能够自己感受一下。

FilledButton(
  onPressed: () {},
  child: const Text('FilledButton'),
),

正常状况下款式：

手指按下时款式：

OutlinedButton

OutlinedButton差异则是在于边框，它的布景色默认为白色，给边框添加了主题色。

OutlinedButton(
  onPressed: () {},
  child: const Text('OutlinedBut
),

正常状况下款式：

手指按下时款式：

上面便是ButtonStyleButton四种款式的按钮，每一种都有自己的特色，小伙伴们能够按需挑选，假如都不满意自己的需求也能够运用ButtonStyleButton自定义自己的按钮款式，下面咱们以这种形式自己定义一套目标的款式。

TextButton(
  onPressed: () {},
  style: const ButtonStyle(
    backgroundColor: MaterialStatePropertyAll<Color>(Colors.red),
    elevation: MaterialStatePropertyAll(10.0),
    shape: MaterialStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        side: BorderSide(color: Colors.black, width: 0.5),
      ),
    ),
  ),
  child: const Text(
    'CustomButton',
    style: TextStyle(color: Colors.white),
  ),
),

这儿咱们运用TextButton办法中style参数自定义了一套按钮的款式，style参数为ButtonStyle类型，ButtonStyle类中能够运用backgroundColor自定义布景色彩，这儿需求留意的是传入的为MaterialStatePropertyAll类型；elevation用于定义暗影；shape用于定义按钮的边框，这儿运用的是RoundedRectangleBorder，在内部定义了15的圆弧视点和边框宽度为0.5色彩为黑色款式，完成的作用如上图所示。

上面这样完成办法有可能会觉得复杂，也能够在child的文本组件中定义想要的款式，这儿就不过多介绍了～

IconButton

图标按钮

IconButton是专门为图标按钮设计的，它的款式仅显现一个Icon，有点相似单纯的Icon组件，不过它增加了许多额定的属性，下面咱们来看看IconButton详细的完成。

var iconButtonIsSelected = false;
IconButton(
  onPressed: () {
    setState(() {
      iconButtonIsSelected = !iconButtonIsSelected;
    });
  },
  selectedIcon: const Icon(Icons.person_outline),
  isSelected: iconButtonIsSelected,
  color: Colors.green,
  icon: const Icon(Icons.person),
),

正常状况下款式：

selected状况下款式：

IconButton供给了正常状况和selected状况下不同的款式，咱们能够别离给这两种状况设置不相同的Icon图标，而且还能够通过color参数给Icon设置自定义的色彩值。

假如需求运用单独的Icon按钮，能够选用IconButton来完成。其实除了IconButton以外，Flutter还供给了图标+文本款式的按钮，相对于IconButton款式图标+文本款式的按钮在日常开发中运用的过多一点，接下来咱们看看这种款式是怎么完成的。

图标+文本按钮

TextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('add'),
),
ElevatedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('add'),
),
FilledButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('add'),
),
OutlinedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('add'),
),

一般按钮款式的TextButton、ElevatedButton、FilledButton和OutlinedButton都供给了icon()的扩展办法，用于完成按钮文字前面加图标的功能，在用法上面仅仅多了Widget icon和Widget label两个参数，别离用于显现图标和提示文本的作用。

ActionButton

ActionButton

ActionButton其实便是Flutter给咱们额定封装了一层的IconButton，它内部还是选用的IconButton来完成，能够先看一下它的结构办法：

const _ActionButton({
  super.key,
  this.color,
  required this.icon,
  required this.onPressed,
  this.style,
});

结构办法还是比较简略的，定义了color色彩值、icon图标、onPressed点击事情和style按钮款式，然后在其内部的build(context)办法中直接调用了IconButton，这儿留意一点便是点击事情，假如咱们传入了onPressed参数，那么就会选用咱们传入的回调，否则就会直接调用_onPressedCallback(context)办法，此办法下面会介绍。

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterialLocalizations(context));
  return IconButton(
    icon: icon,
    style: style,
    color: color,
    tooltip: _getTooltip(context),
    onPressed: () {
      if (onPressed != null) {
        onPressed!();
      } else {
        _onPressedCallback(context);
      }
    },
  );
}

它是一个抽象类，咱们不能够直接拿来运用，Flutter帮咱们封装了几种特定的ActionButton，别离为：BackButton、CloseButton、DrawerButton和EndDrawerButton。

详细款式

BackButton(),
CloseButton(),
DrawerButton(),
EndDrawerButton()

这四种款式的ActionButton运用起来应该是最为简略的了，能够不传入任何参数，直接引进即可，这儿咱们挑BackButton看看内部的完成是怎么。

class BackButton extends _ActionButton {
  const BackButton({
    super.key,
    super.color,
    super.style,
    super.onPressed,
  }) : super(icon: const BackButtonIcon());
  @override
  void _onPressedCallback(BuildContext context) => Navigator.maybePop(context);
  @override
  String _getTooltip(BuildContext context) {
    return MaterialLocalizations.of(context).backButtonTooltip;
  }
}

BackButton内部完成也是极为简略的，结构办法中完成了父类的icon参数，传入了BackButtonIcon()，这个返回Icon组件，然后复写了_onPressedCallback办法，调用的是Navigator.maybePop()，此办法意思便是将当时页面退出页面仓库，浅显来说便是退出当时页面，Navigator常识后续文章会详细介绍。

看到这大致就理解了BackButton的详细完成了，假如咱们需求一个点击退出界面的按钮，能够考虑运用BackButton组件，毕竟Flutter现已为咱们完成好了逻辑。

其余三个ActionButton就不再一一介绍了，小伙伴能够自行阅览源码哈～

ToggleButtons

ToggleButtons是一个特别的按钮，说它是按钮其实有点牵强，它其实是一组能够开关的按钮，根据当时开关的状况有不相同的体现，子组件为List，而且子组件中每一个都能够相应onPressed点击事情。

var isSelected = [false, false, false];
ToggleButtons(
  isSelected: isSelected,
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  children: const <Widget>[
    Icon(Icons.person),
    Icon(Icons.email),
    Icon(Icons.home),
  ],
),

这儿咱们别离介绍下三个重要的参数：

• isSelected参数为List类型，根据子组件的数量，需求传入对应大小的bool列表，这儿默认开关都是关闭状况；
• onPressed参数为Function(int index)类型，index便是点击的子组件对应的下标，这儿便是将对应下标的状况置为相反值；
• children参数为List类型，需求传入和isSelected大小一致的组件数量。

最终来看看详细作用：

写在最终

本篇文章全面的介绍了Flutter中按钮的相关常识，希望能够协助咱们了进一步了解和熟悉按钮的相关常识，后续会按部就班逐渐触摸Flutter更多的常识。

我是Taonce，假如觉得本文对你有所协助，帮助关注、赞或许保藏三连一下，谢谢～