Question

使用有状态的小部件来显示陈旧的小部件

我有一个UI，可以通过网络接收更新文本更新。当有更新时，我希望先以红色显示它，然后随着消息的年龄增加，使其逐渐淡化为黑色。如果有来自同一来源的新消息，我想用新消息替换旧消息的文本，然后使文本从红色逐渐变黑。

当我将带有状态的小部件与RestartableTimer一起使用时，首先启动UI时，一切似乎都可以正常工作。但是，当 second 消息从特定来源发出时，事情就此中断了。如果我使用普通的Text（）来显示新消息，则可以正常工作。但是，如果我使用有状态的小部件来显示文本并从红色渐变为黑色，则UI仍旧，并且似乎没有任何更新可以解决问题。

我的层次结构（已删除特定于布局的内容）如下：

Stateful Container for different sources
|
List View
|
+--- Stateless Custom Widget
     |
     +-- Stateless Text (displays the source)
     |
     +-- Stateful Custom Text class
<repeated for each source>

如果我用一个普通的Text（）替换我的自定义类，则文本突然更新就好了（但是没有褪色）。

无状态自定义小部件

  Widget _CreateDataTable() {
    const Color start_color = Colors.red;
    const Color end_color = Colors.black;
    const Duration fade_len = Duration(seconds: 10);
    var read_time = DateTime.fromMillisecondsSinceEpoch(
        _data.data.timeSeconds * 1000,
        isUtc: true);
    String date_text = read_time.toLocal().toString();
    List<String> labels = ["Temperature", "Humidity", "RSSI", "Last Reading"];
    List<Widget> data = [
      Text(_data.data.temperature.toStringAsFixed(2) + " C"),
      Text(_data.data.humidity.toStringAsFixed(2) + "%"),
      Text(_data.rssi.toString() + " dB"),
      FlashText(date_text, start_color, end_color, read_time, fade_len),
      // Text(date_text),
      //
      //  IF I COMMENT OUT FlashText AND UNCOMMENT Text, EVERYTHING
      //  WORKS FINE. IF I KEEP IT AS IS, I ONLY SEE THE FIRST EVER
      //  MESSAGE AND NEW MESSAGES, WHICH I CAN CONFIRM RECEIVING VIA
      //  debugPrint, ARE SEEMINGLY IGNORED.
    ];

    var rows = List<Row>();
    for (int i = 0; i < labels.length; ++i) {
      rows.add(Row(children: [
        IntrinsicWidth(child: SizedBox(width: 10.0)),
        IntrinsicWidth(child: Text(labels[i] + ":")),
        IntrinsicWidth(child: data[i]),
        Expanded(child: SizedBox()),
      ]));
    }
    return Column(children: rows);

状态自定义小部件

class FlashText extends StatefulWidget {
  final Color _color0;
  final Color _color1;
  final DateTime _start;
  final Duration _duration;
  final String _text;

  FlashText(
      this._text, this._color0, this._color1, this._start, this._duration);

  @override
  _FlashTextState createState() {
    debugPrint("Creating state for $_text - $_start");
    return _FlashTextState(_text, _color0, _color1, _start, _duration);
  }
}

class _FlashTextState extends State<FlashText> {
  Color _color0;
  Color _color1;
  DateTime _start;
  Duration _duration;
  String _text;

  Animation<double> _animation;
  AnimationController _controller;

  _FlashTextState(
      this._text, this._color0, this._color1, this._start, this._duration);

  @override
  Widget build(BuildContext ctx) {
    return Text(_text,
        style: TextStyle(color: Color.lerp(_color0, _color1, _GetT())));
  }

  @override
  void initState() {
    super.initState();
    RestartableTimer(_duration ~/ 30, _Update);
  }

  double _GetT() {
    DateTime now = DateTime.now().toUtc();
    return min(1, max(0, now.difference(_start).inMilliseconds /
    _duration.inMilliseconds.toDouble()));
  }

  void _Update() {
    if (_GetT() < 1.0) RestartableTimer(_duration ~/ 30, _Update);
  }
}

Answer 1

我认为您必须更改FlashText小部件的设计，并在小部件文本更改时使用didUpdateWidget方法进行重建。

我已经在一个完整的应用程序下面使用文本字段和一个按钮来模拟来自服务器的文本来实现。

我认为这或多或少是您所需要的，但可能需要一些调整。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _cont = TextEditingController();

  String text = "qwertrrr";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test"),
      ),
      body: Column(
        children: <Widget>[
          TextFormField(
            controller: _cont,
          ),
          RaisedButton(
            child: new Text("Test"),
            onPressed: () => setState(() {
                  text = _cont.text;
                }),
          ),
          FlashText(text, Colors.red, Colors.black, 10),
        ],
      ),
    );
  }
}

class FlashText extends StatefulWidget {
  final Color color0;
  final Color color1;
  final int duration;
  final String text;

  FlashText(this.text, this.color0, this.color1, this.duration);

  @override
  _FlashTextState createState() {
    return _FlashTextState();
  }
}

class _FlashTextState extends State<FlashText>
    with SingleTickerProviderStateMixin<FlashText> {
  Animation<Color> _animation;
  AnimationController _controller;

  Timer timer;

  @override
  void didUpdateWidget(FlashText oldWidget) {
    if (widget.text != oldWidget.text) {
      _controller.forward(from: 0.0);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext ctx) {
    return Text(
      widget.text,
      style: TextStyle(color: _animation.value),
    );
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: Duration(seconds: widget.duration));
    _animation = ColorTween(begin: widget.color0, end: widget.color1)
        .animate(_controller)
          ..addListener(() => setState(() {}));
    _controller.forward();
  }
}

有状态和无状态颤振UI的混合未更新

1 个答案: