我如何在Flutter中更改ColorTween颜色 [英] How could I change ColorTween colors in Flutter

问题描述

当我在Flutter中调用setState()时，我想更改ColorTween中的颜色

I want to change the colors in the ColorTween when I call setState() in Flutter

这是我的动画图像

import 'dart:async';

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

class FingerprintImageWidget extends StatefulWidget {
  FingerprintImageWidget(
      {Key key, this.width, this.height, this.beginColor, this.endColor})
      : super(key: key);

  final double width;
  final double height;
  Color beginColor;
  Color endColor;

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

class FingerprintImageWidgetState extends State<FingerprintImageWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Color> _colorTween;
  Color beginColor;
  Color endColor;

  @override
  void initState() {
    beginColor = widget.beginColor;
    endColor = widget.endColor;
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _colorTween = ColorTween(begin: beginColor, end: endColor)
        .animate(_animationController);
    changeColors();
    super.initState();
  }


  Future<void> changeColorController;
  @override
  void dispose() {
    _animationController.dispose();
    disposed = true;
    super.dispose();
  }

  bool disposed = false;

  Future<void> changeColors() async {
    while (!disposed) {
      if (disposed) return;
      await Future<void>.delayed(const Duration(milliseconds: 1300), () {
        if (_animationController.status == AnimationStatus.completed) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _colorTween,
        builder: (BuildContext context, Widget child) => AppImage(
              IMAGE_FINGERPRINT,
              width: widget.width,
              height: widget.height,
              color: _colorTween.value,
              fit: BoxFit.contain,
            ));
  }
}

推荐答案

我通过分隔补间动画对象的动画对象解决了我的问题

I solved my issue by separating the animation object of the color tween object

  void redraw(Color beginColor, Color endColor) {
    setState(() {
      _colorTween = ColorTween(begin: beginColor, end: endColor);

      _colorTweenAnimation = _colorTween.animate(_animationController);
    });
  }

全班制:

import 'dart:async';

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

class FingerprintImageWidget extends StatefulWidget {
  FingerprintImageWidget(
      {Key key, this.width, this.height, this.beginColor, this.endColor})
      : super(key: key);

  final double width;
  final double height;
  Color beginColor;
  Color endColor;

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

class FingerprintImageWidgetState extends State<FingerprintImageWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  ColorTween _colorTween;
  Animation<Color> _colorTweenAnimation;
  Color beginColor;
  Color endColor;

  @override
  void initState() {
    beginColor = widget.beginColor;
    endColor = widget.endColor;
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _colorTween = ColorTween(begin: beginColor, end: endColor);
    _colorTweenAnimation = _colorTween.animate(_animationController);
    changeColors();
    super.initState();
  }

  void redraw(Color beginColor, Color endColor) {
    setState(() {
      _colorTween = ColorTween(begin: beginColor, end: endColor);

      _colorTweenAnimation = _colorTween.animate(_animationController);
    });
  }

  Future<void> changeColorController;
  @override
  void dispose() {
    _animationController.dispose();
    disposed = true;
    super.dispose();
  }

  bool disposed = false;

  Future<void> changeColors() async {
    while (!disposed) {
      if (disposed) return;
      await Future<void>.delayed(const Duration(milliseconds: 1300), () {

        if (_animationController.status == AnimationStatus.completed) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _colorTweenAnimation,
        builder: (BuildContext context, Widget child) => AppImage(
              IMAGE_FINGERPRINT,
              width: widget.width,
              height: widget.height,
              color: _colorTweenAnimation.value,
              fit: BoxFit.contain,
            ));
  }
}

然后我使用了全局密钥，所以我可以调用redraw

Then I used a global key so I can call redraw

  final GlobalKey<FingerprintImageWidgetState> _fingerprintImageKey =
      GlobalKey();
    FingerprintImageWidget(
                key: _fingerprintImageKey,
                width: 70,
                height: 100,
                beginColor: beginFingerColor,
                endColor: endFingerColor,
              ),
      _fingerprintImageKey.currentState.redraw(beginFingerColor,endFingerColor);

这篇关于我如何在Flutter中更改ColorTween颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！