扑动 IconButton 改变颜色 onPressed

简介

本篇主题介绍了如何在 Flutter 中使用 IconButton 并在点击时实现改变颜色的效果。

前置知识

在学习本主题前，你需要了解以下知识：

• Flutter 基础知识
• StatelessWidget 和 StatefulWidget
• 点击事件处理机制

正文

IconButton 是一个 Material Design 风格的圆形图标按钮，Flutter 提供了多种形状的图标供开发者选择使用。

在本主题中，我们将演示如何在 IconButton 的 onPressed 回调函数中实现改变颜色的效果。具体步骤如下：

1. 创建 StatefulWidget

我们需要创建一个 StatefulWidget，来维护 IconButton 的状态。在该 StatefulWidget 中，我们需要维护一个变量用于记录当前按钮的颜色。

class ColorfulIconButton extends StatefulWidget {
  const ColorfulIconButton({Key key}) : super(key: key);

  @override
  _ColorfulIconButtonState createState() => _ColorfulIconButtonState();
}

class _ColorfulIconButtonState extends State<ColorfulIconButton> {
  Color buttonColor = Colors.blue;

  void _changeColor() {
    setState(() {
      buttonColor = buttonColor == Colors.blue ? Colors.green : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        icon: Icon(Icons.adb),
        color: buttonColor,
        onPressed: _changeColor,
      ),
    );
  }
}

2. 维护颜色状态

在 StatefulWidget 中，我们实现一个回调函数 _changeColor() 用于改变按钮的颜色，我们在该回调函数中使用 setState() 方法来更新状态并触发控件重建。

void _changeColor() {
  setState(() {
    buttonColor = buttonColor == Colors.blue ? Colors.green : Colors.blue;
  });
}

在该函数中，我们对 buttonColor 进行了取反操作，当其为 blue 时，变为 green，反之变为 blue。最后，我们调用 setState() 方法通知 Flutter 更新界面。

3. 使用 IconButton

使用 ColorfulIconButton 控件来替换掉原本的 IconButton。新的 IconButton 会在点击后改变颜色，实现了扑动的效果。

body: Center(
  child: ColorfulIconButton(),
),

总结

本主题介绍了如何在 Flutter 中使用 IconButton 并在点击时实现改变颜色的效果。主要涉及的知识点有 StatefulWidget 和 点击事件处理机制。在 Flutter 中，开发者可以轻松实现各种交互效果，提升应用的用户体验。