让有状态的小部件颤动

在Flutter中，可以让小部件具有状态。状态的变化可以通过运行时来实现，这也意味着它们可以随时改变，包括颤动。

以下是在Flutter中使有状态小部件颤动的两种方法：

方法一：使用动画控制器

这是Flutter中最基本的动画方法之一，使用动画控制器来控制动画。在这种情况下，我们使用振动器对象来控制小部件的颤动。

import 'package:flutter/material.dart';
import 'dart:math';

class VibrateWidget extends StatefulWidget {
  @override
  _VibrateWidgetState createState() => _VibrateWidgetState();
}

class _VibrateWidgetState extends State<VibrateWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      lowerBound: 0,
      upperBound: 2 * pi,
      duration: const Duration(milliseconds: 200),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _animationController.forward(from: 0),
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (_, child) {
          final double height = sin(_animationController.value * 10);
          return Transform.translate(
            offset: Offset(0, height),
            child: child,
          );
        },
        child: Container(
          height: 50,
          width: 50,
          color: Colors.blue,
        ),
      ),
    );
  }
}

在上述代码中，我们创建了一个名为“VibrateWidget”的小部件类，它继承了“StatefulWidget”。在其状态类中，我们创建了一个动画控制器，并且在其“initState”方法中初始化了该控制器。我们为其提供了一个上限和下限，以及一个时间间隔。

我们在创建小部件时创建了一个“GestureDetector”，并在其“onTap”方法中调用了动画控制器的“forward”方法。

在构建方法中，我们构建了一个动画构建器，该构建器将动画控制器、子对象（本例中为一个源对象）作为输入，并在其构建方法中操作它们。

在此示例中，我们使用正弦函数来计算动画。当我们在“onTap”方法中调用动画控制器的“forward”方法时，我们可以使用“sin”方法和动画值来获取小部件的高度。

方法二：使用AnimatedWidget类

在Flutter中，使用“AnimatedWidget”等同于使用动画构建器。唯一的区别是，当我们使用AnimatedWidget时，动画构建器的父项被包装在“AnimatedWidget”类中，这使得其更清晰。

以下是使用“AnimatedWidget”实现小部件颤动的示例代码：

import 'package:flutter/material.dart';
import 'dart:math';

class VibrateWidget2 extends StatefulWidget {
  @override
  _VibrateWidget2State createState() => _VibrateWidget2State();
}

class _VibrateWidget2State extends State<VibrateWidget2>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      lowerBound: 0,
      upperBound: 2 * pi,
      duration: const Duration(milliseconds: 200),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _animationController.forward(from: 0),
      child: VibrateAnimatedWidget(
        animation: _animationController,
        child: Container(
          height: 50,
          width: 50,
          color: Colors.blue,
        ),
      ),
    );
  }
}

class VibrateAnimatedWidget extends AnimatedWidget {
  final Widget child;

  VibrateAnimatedWidget({
    Key key,
    Animation<double> animation,
    this.child,
  }) : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final double height = sin(listenable.value * 10);
    return Transform.translate(
      offset: Offset(0, height),
      child: child,
    );
  }
}

在此代码中，我们创建了一个名为“VibrateWidget2”的小部件类，它与第一种方法的实现类似。唯一的区别是，我们使用“VibrateAnimatedWidget”作为“child”而不是源对象。

“VibrateAnimatedWidget”类继承“AnimatedWidget”类，并在其构造函数中使用“animation”和“child”作为输入。我们在其“build”方法中操作动画值以创建动画。

在“VibrateWidget2”小部件中，我们将原对象包装在“VibrateAnimatedWidget”类中，并传递给其动画控制器。

总结

以上是两种在Flutter中使有状态小部件颤动的方法。第一种方法使用动画构建器，而第二种方法则使用“AnimatedWidget”类。无论您选择哪种方法，都应该能够成功地为小部件创建颤动动画，以为您的应用程序增添亮点。