问Flutter不更新子小部件
EN

Stack Overflow用户

提问于 2018-05-22 21:11:43

回答 2查看 8.3K关注 0票数 5

我有一个小部件，其中包含一个子小部件。它在build方法中获得最后一个值和新值，如下所示：

children: <Widget>[
                    AspectRatio(
                      aspectRatio: 1.0,
                      child: Container(
                        padding: const EdgeInsets.all(16.0),
                        child: CircleWidget(_lastWindSpeed/10, _speed/10),
                      ))
                  ],
                ),

状态将被更新为

setState

但如果存在新值，则小部件不会更新。

有没有人看到问题所在？

这个类是：

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

class CircleWidget extends StatefulWidget {
  final double _start;
  final double _finish;
  CircleWidget(this._start, this._finish);

  @override
  State<CircleWidget> createState() => new _CircleState();
}

class _CircleState extends State<CircleWidget> with SingleTickerProviderStateMixin{

  Animation<double> animation;
  double _fraction;

  @override
  void initState() {
    super.initState();
    var controller = AnimationController(duration: new Duration(milliseconds: 10), vsync: this);
    animation = Tween(begin: widget._start, end: widget._finish).animate(controller)
      ..addListener((){
        setState(() {
          _fraction = animation.value;
        });
      });
    controller.forward();
  }
  @override
  Widget build(BuildContext context) {
    return new CustomPaint(
        painter: new CirclePainter(_fraction));
  }
}

非常感谢。

ios

dart

flutter

flutter-layout

云点播特惠1元起

提供三端 SDK 、云 API、控制台等多种上传方式，弱网环境下文件上传成功率达到 99.5%

回答 2

Stack Overflow用户

发布于 2018-05-22 21:29:40

如果希望动画在CircleWidget的值更改时重新启动，则需要使用didUpdateWidget生命周期。initState只调用一次，而didUpdateWidget则在每次重新创建相应的小部件时调用-请注意，如果父小部件也重新构建，则这些值可能是相同的。

@override
void didUpdateWidget(CircleWidget oldWidget) {
  if (oldWidget._start != widget._start || 
    oldWidget._end != widget._end) {
    // values changed, restart animation.
    controller
      ..reset()
      ..forward();
  }
  super.didUpdateWidget(oldWidget);
}

票数 15

Stack Overflow用户

发布于 2020-07-03 03:15:02

我想发布上面给出的解决方案的替代解决方案。如果希望StatefulWidget在调用setState时或在StreamBuilder内部更新其底层数据，则应该将UniqueKey传递给StatefulWidget构造函数。当setState被调用时，fullter的行为是检查在StatefulWidget的情况下类型是否没有改变，如果不是，什么都不会被更新。如果将UniqueKey添加到构造器，flutter UI更新器将改为检查密钥。我希望这能帮到你。

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

class CircleWidget extends StatefulWidget {
  final double _start;
  final double _finish;
  CircleWidget(this._start, this._finish, Key:key):super(key:key); // <-- check this

  @override
  State<CircleWidget> createState() => new _CircleState();
}

class _CircleState extends State<CircleWidget> with SingleTickerProviderStateMixin{

  Animation<double> animation;
  double _fraction;

  @override
  void initState() {
    super.initState();
    var controller = AnimationController(duration: new Duration(milliseconds: 10), vsync: this);
    animation = Tween(begin: widget._start, end: widget._finish).animate(controller)
      ..addListener((){
        setState(() {
          _fraction = animation.value;
        });
      });
    controller.forward();
  }
  @override
  Widget build(BuildContext context) {
    return new CustomPaint(
        painter: new CirclePainter(_fraction));
  }
}



children: <Widget>[
                    AspectRatio(
                      aspectRatio: 1.0,
                      child: Container(
                        padding: const EdgeInsets.all(16.0),
                        child: CircleWidget(_lastWindSpeed/10, _speed/10, key: UniqueKey()), // <---- add UniqueKey as key param here to tell futter to check keys instead of types
                      ))
                  ],
                ),