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

Stack Overflow用户

提问于 2021-04-05 10:37:45

回答 1查看 65关注 0票数 1

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

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

HomePage

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

BlackBox小部件

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,
        ),
      ),
    );
  }
}

WhiteBox小部件

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

9.9元起，最快1天搭建自有直播

提供高并发、低延迟、易接入、极速高清的音视频直播服务，适用于直播电商/在线教育/音视频互动等多种场景

回答 1

Stack Overflow用户

发布于 2021-04-05 14:27:07

我不知道这是最好的解决方案。但是你可以通过这种方式来实现你的目标。

找到下面的代码片段：

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()),
        ),
      ),
    );
  }
}