Flutter animation controller 使用 GetX

Question

我最近切换到 GetX 并想在 GetxController 中初始化 animation GetxController并可以在GetView中访问它。 当应用程序启动时，animation 毫无问题地到达 go，但无法再次转发。

class SplashController extends GetxController with GetTickerProviderStateMixin {
  var h = 0.0.obs;
  late AnimationController ac;
  late Animation animation;

  Future<void> initAnimation() async {
    ac = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    animation = Tween(begin: 0.0, end: 1.0).animate(ac);
  }

  forwardAnimationFromZero() {
    ac.forward(from: 0);
  }

  @override
  void onInit() {
    super.onInit();
    initAnimation();
    forwardAnimationFromZero();
    ac.addListener(() {
      h.value = animation.value;
    });
  }

  @override
  void onReady() {
    super.onReady();
    forwardAnimationFromZero();
  }

  @override
  void onClose() {
    super.onClose();
    ac.dispose();
  }
}

如您所见，我使用 GetTickerProviderStateMixin 扩展GetxController with GetTickerProviderStateMixin但自动收报机无法正常工作。 我定义var h = 0.0.obs; 因为可以观察到所以可以在屏幕上访问并且没有它 animation 不会打勾！

class SplashPage extends GetView<SplashController> {
  const SplashPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var c = Get.put(SplashController());
    return Scaffold(
      body: Column(
        children: [
          Container(
            color: Colors.amber,
            width: (controller.animation.value * 100) + 100,
            height: (controller.animation.value * 100) + 100,
            child: Center(
              child: Text(
                controller.animation.value.toString(),
              ),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          c.ac.forward(from: 0);
        },
        child: Icon(Icons.refresh),
      ),
      appBar: AppBar(
        title: const Text('Splash Page'),
      ),
    );
  }
}

在此视图中，启动时 animation 没有反应，但当我hot relaod重播时，我看到它结束了 state。当将Container小部件更改为：

          Obx(
            () => Container(
              color: Colors.amber,
              width: (controller.animation.value * 100) + 100,
              height: (controller.h.value * 100) + 100,
              child: Center(
                child: Text(
                  controller.animation.value.toString(),
                ),
              ),
            ),
          ),

重述ac.addListener(() {h.value = animation.value;}); animation 开始播放但当我按下floatingActionButton时无法从零再次前进。 我想要的是：

1. 为什么 animation 在没有h observable 的情况下不会在开头出现？
2. 如何在视图中访问 animation controller 函数？
3. 当一些 animation controller 完成后我想开始另一个 animation controller。

Answer 1

这部分使用 AnimatedContainer。 因为写得太长会随着代码的增长而减慢你的工作。

Controller

class SplashController extends GetxController {
  var h = 40.0.obs;
}

页

class SplashPage extends GetView<SplashController> {
  var click = true;
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SplashController>(
      init: Get.put(SplashController()),
      builder: (cnt) {
        return Center(
          child: PageView(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  ElevatedButton(
                    child: Text('Animate!'),
                    onPressed: () {
                      click
                          ? cnt.h.value = 250.0
                          : cnt.h.value = 50.0;
                      click = !click;
                    },
                  ),
                  Obx(
                    () => AnimatedContainer(
                      duration: Duration(seconds: 1),
                      width: cnt.h.value,
                      height: 40,
                      color: Colors.red,
                    ),
                  ),
                ],
              )
            ],
          ),
        );
      }
    );
  }
}

以下代码用于更新您的代码，当它是 StatelessWidget 时。

Obx(
    () => AnimatedContainer(
       duration: Duration(seconds: 1),
       width: cnt.h.value,
       height: 40,
       color: Colors.red,
       ),
   ),

每次单击该按钮时，您都可以放大和缩小。