Flutter 如何从另一个小部件访问 AnimationController 方法答案

【问题标题】：Flutter how to access AnimationController methods from another widgetFlutter 如何从另一个小部件访问 AnimationController 方法
【发布时间】：2021-07-01 05:40:01
【问题描述】：

我正在用 Flutter 构建一个国际象棋时钟应用程序。我有一个主页，其中包含两个名为 blackBox 和 whiteBox 的容器小部件，它们都显示计时器。我在两个小部件上都使用动画控制器来控制计时器。

我喜欢做的是当我点击白色容器时，我想停止 whiteController 动画并启动 blackController 动画，反之亦然黑色容器。但我不知道如何在 blackBox 小部件中访问 whiteController 及其方法。我在下面分享我的代码的最小版本

主页


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlackBox(),
        WhiteBox(),
      ],
    );
  }
}

黑盒小部件


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

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

class _BlackBoxState extends State<BlackBox>
    with SingleTickerProviderStateMixin {
  AnimationController blackController;
  @override
  void initState() {
    blackController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          blackController.forward(from: blackController.value);
        },
        child: Container(
          color: Colors.amber,
        ),
      ),
    );
  }
}

白盒小部件


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

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

class _WhiteBoxState extends State<WhiteBox> with TickerProviderStateMixin {
  AnimationController whiteController;
  @override
  void initState() {
    whiteController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          whiteController.forward(from: whiteController.value);
        },
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

【问题讨论】：

标签： android flutter dart flutter-animation

【解决方案1】：

我不知道这是最好的解决方案。但是您可以通过这种方式实现您的案例。

在下面找到代码sn-ps：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _blackController;
  AnimationController _whiteController;

  @override
  void initState() {
    _blackController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    _whiteController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    _blackController.addListener(_rebuild);
    _whiteController.addListener(_rebuild);
    super.initState();
  }

  void _rebuild() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          BlackBox(
            whiteController: _whiteController,
            blackController: _blackController,
          ),
          WhiteBox(
            whiteController: _whiteController,
            blackController: _blackController,
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _blackController.removeListener(_rebuild);
    _whiteController.removeListener(_rebuild);
    super.dispose();
  }
}

黑匣子：


class BlackBox extends StatefulWidget {
  const BlackBox({Key key, this.blackController, this.whiteController})
      : super(key: key);

  final AnimationController blackController;
  final AnimationController whiteController;

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

class _BlackBoxState extends State<BlackBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          widget.whiteController.stop();
          widget.blackController.forward(from: widget.blackController.value);
        },
        child: Container(
          color: Colors.amber,
          alignment: Alignment.center,
          child:
              Text(widget.blackController.value.toStringAsFixed(2).toString()),
        ),
      ),
    );
  }
}

白盒：


class WhiteBox extends StatefulWidget {
  const WhiteBox({
    Key key,
    this.blackController,
    this.whiteController,
  }) : super(key: key);

  final AnimationController blackController;
  final AnimationController whiteController;

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

class _WhiteBoxState extends State<WhiteBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          widget.blackController.stop();
          widget.whiteController.forward(from: widget.whiteController.value);
        },
        child: Container(
          color: Colors.red,
          alignment: Alignment.center,
          child:
              Text(widget.whiteController.value.toStringAsFixed(2).toString()),
        ),
      ),
    );
  }
}

【讨论】：