浮动动作按钮矩形颤动 - Dart

浮动动作按钮（Floating Action Button）是一种常见的用户界面设计元素，通常位于屏幕底部或右下角。它可以作为主要操作按钮，以吸引用户进行重要的操作。Flutter中的浮动动作按钮通常是圆形的，但也可以自定义为其他形状，如矩形。

本文将介绍如何实现浮动动作按钮矩形颤动的效果。这种效果通常在用户点击按钮时触发，以提高按钮的可点击性和交互性。

实现过程

步骤一：添加组件

首先，在Scaffold的body中添加一个Container，用于放置浮动动作按钮。代码如下：

Scaffold(
  body: Container(
    alignment: Alignment.bottomRight,
    padding: EdgeInsets.all(16.0),
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
);

这段代码创建了一个Scaffold Widget，并在其body中添加了一个Container Widget，其中包含了一个FloatingActionButton。

步骤二：定义动画

接下来，我们需要定义颤动的动画。在Flutter中，动画通常由AnimationController、Tween和Animation三个组件组成。我们可以通过Tween来定义动画的开始值和结束值，然后通过AnimationController控制动画的播放速度和方向，最后通过Animation将Tween和AnimationController连接起来。

下面的代码定义了一个AnimationController和Tween：

final _controller = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 300),
);
final _tween = Tween<double>(begin: 0.0, end: 1.0);

在这里，我们创建了一个AnimationController，将其与当前的StatefulWidget相关联，以便在整个生命周期内保持同步。我们还定义了一个Tween，它将在0.0到1.0之间进行动画。

步骤三：定义动画执行

接下来，在FloatingActionButton中添加动画执行代码。我们将动画控制器传递给FloatingActionButton的heroTag属性，并在onPressed回调中启动动画。代码如下：

FloatingActionButton(
  heroTag: "fab",
  onPressed: () {
    _controller.forward(from: 0.0);
  },
  child: AnimatedBuilder(
    animation: _tween.animate(_controller),
    builder: (context, child) {
      return Transform.scale(
        scale: 1 + _tween.value * 0.06,
        child: child,
      );
    },
    child: Icon(Icons.add),
  ),
)

在这里，我们将AnimationController传递给FloatingActionButton的heroTag属性，以确保在执行动画时可以正确地执行Hero动画。我们将onPressed回调中的动画控制器向前启动，从0.0开始。

AnimatedBuilder是Flutter中用于在动画的每个帧之间重建UI的组件。我们将它与Tween结合使用，创建一个Transform Widget，以实现按钮放大和缩小的效果。

至此，浮动动作按钮矩形颤动的效果就完成了！完整代码如下：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  final _controller = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 300),
  );
  final _tween = Tween<double>(begin: 0.0, end: 1.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.bottomRight,
        padding: EdgeInsets.all(16.0),
        child: FloatingActionButton(
          heroTag: "fab",
          onPressed: () {
            _controller.forward(from: 0.0);
          },
          child: AnimatedBuilder(
            animation: _tween.animate(_controller),
            builder: (context, child) {
              return Transform.scale(
                scale: 1 + _tween.value * 0.06,
                child: child,
              );
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

结束语

本文介绍了如何使用Flutter实现浮动动作按钮矩形颤动的效果。虽然本例只演示了按钮放大和缩小的动画，但您可以使用Flutter的其他内置动画和自定义动画来扩展此效果。希望这篇文章对Flutter开发有所帮助！