Dart 在颤振中定期更新显示

在颤振中，我们希望定期更新显示。 我们可以在值更改时更新显示。 但是，在这种情况下，设定值不会改变。 因此，我们不知道如何作为触发器来更新显示

我们从无状态小部件更改为有状态小部件。我们在initState（）中启动计时器，并在dispose（）中取消计时器。我们定期在ScopedModel上调用notifyListeners（），并正在更新图形

它按预期工作。不幸的是，这不是一个美丽的方式。这很难理解，很烦人。你不知道更好的方法吗？我们该怎么办

我们将在下面说明我们的实现示例。这是一个最小的代码

xxxxx_widget.dart

import 'package:flutter/material.dart';
import 'package:pregnancy/scoped_model/xxxxx_model.dart';
import 'package:pregnancy/widgets/yyyyy_widget.dart';
import 'package:scoped_model/scoped_model.dart';

class XxxxxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<XxxxxModel>(
      model: XxxxxModel(),
      child: YyyyyWidget(),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:pregnancy/scoped_model/xxxxx_model.dart';
import 'package:scoped_model/scoped_model.dart';

class YyyyyWidget extends StatefulWidget {
  @override
  YyyyyWidgetState createState() {
    return new YyyyyWidgetState();
  }
}

class YyyyyWidgetState extends State<YyyyyWidget> {
  Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(
      const Duration(milliseconds: 500),
      (Timer t) {
        XxxxxModel.of(context).notify();
      },
    );
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    _timer = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<XxxxxModel>(
      builder: (context, child, model) {
        var diff = model.datetime.difference(DateTime.now());
        var hours = diff.inHours.remainder(Duration.hoursPerDay);
        var minutes = diff.inMinutes.remainder(Duration.minutesPerHour);
        var seconds = diff.inSeconds.remainder(Duration.secondsPerMinute);
        return Text('${hours} hours ${minutes} minutes ${seconds} seconds');
      },
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:pregnage/scoped_model/xxxxx_model.dart”；
导入“package:pregnage/widgets/yyyy_widget.dart”；
导入“package:scoped_model/scoped_model.dart”；
类XxxxxWidget扩展了无状态widget{
@凌驾
小部件构建（构建上下文）{
返回范围模型(
型号：XxxxxModel（），
子项：yyyywidget（），
);
}
}

yyyy_widget.dart

import 'package:flutter/material.dart';
import 'package:pregnancy/scoped_model/xxxxx_model.dart';
import 'package:pregnancy/widgets/yyyyy_widget.dart';
import 'package:scoped_model/scoped_model.dart';

class XxxxxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<XxxxxModel>(
      model: XxxxxModel(),
      child: YyyyyWidget(),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:pregnancy/scoped_model/xxxxx_model.dart';
import 'package:scoped_model/scoped_model.dart';

class YyyyyWidget extends StatefulWidget {
  @override
  YyyyyWidgetState createState() {
    return new YyyyyWidgetState();
  }
}

class YyyyyWidgetState extends State<YyyyyWidget> {
  Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(
      const Duration(milliseconds: 500),
      (Timer t) {
        XxxxxModel.of(context).notify();
      },
    );
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    _timer = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<XxxxxModel>(
      builder: (context, child, model) {
        var diff = model.datetime.difference(DateTime.now());
        var hours = diff.inHours.remainder(Duration.hoursPerDay);
        var minutes = diff.inMinutes.remainder(Duration.minutesPerHour);
        var seconds = diff.inSeconds.remainder(Duration.secondsPerMinute);
        return Text('${hours} hours ${minutes} minutes ${seconds} seconds');
      },
    );
  }
}

导入'dart:async'；
进口“包装：颤振/材料.省道”；
导入“package:pregnage/scoped_model/xxxxx_model.dart”；
导入“package:scoped_model/scoped_model.dart”；
类YYYYWidget扩展了StatefulWidget{
@凌驾
YYYYYYWidgetState createState（）{
返回新的YYYYWidgetState（）；
}
}
类YYYYWidgetState扩展了状态{
定时器(u定时器),；
@凌驾
void initState（）{
_定时器=定时器。周期性(
常量持续时间（毫秒：500），
（计时器t）{
XxxxxModel.of（context.notify（）；
},
);
super.initState（）；
}
@凌驾
无效处置（）{
_timer.cancel（）；
_定时器=空；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回范围modeldescendant(
生成器：（上下文、子对象、模型）{
var diff=model.datetime.difference（datetime.now（））；
var小时=不同的内部剩余时间（持续时间：小时/天）；
var minutes=以分钟为单位的差值余数（持续时间分钟/小时）；
var seconds=剩余时间差（持续时间秒分钟）；
返回文本（“${hours}hours${minutes}minutes${seconds}seconds”）；
},
);
}
}

xxxxx_型省道

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

class XxxxxModel extends Model {
  static XxxxxModel of(BuildContext context) =>
      ScopedModel.of<XxxxxModel>(context);

  DateTime _datetime = DateTime.now().add(Duration(days: 1));

  get datetime => _datetime;

  set datetime(DateTime value) {
    _datetime = value;
    notifyListeners();
  }

  void notify() {
    notifyListeners();
  }
}

导入“包装：颤振/材料.省道”；
导入“package:scoped_model/scoped_model.dart”；
类模型扩展了模型{
的静态模型（BuildContext上下文）=>
范围模型（上下文）；
DateTime _DateTime=DateTime.now（）.add（持续时间（天：1））；
获取datetime=>\u datetime；
设置日期时间（日期时间值）{
_日期时间=值；
notifyListeners（）；
}
作废通知（）{
notifyListeners（）；
}
}

您可以使用侦听间隔流的

StreamBuilder

。它自动管理订阅

---

您的模型可以将流作为属性提供。

如何使用

setState（{}（））

而不是

XxxxxModel.of（context.notify（）

？

但是，在这种情况下，设置的值不会改变。

您能详细说明一下吗？我会处理XxxxxWidget上的状态，这意味着我会将其设置为statefulWidget，并在执行notifyListeners（）时将YYYYWidgetState类（仅显示值）作为无状态小部件保留statefulwidget将重新呈现，并显示无状态Widget上的更新值。>Günter Zöchbauer我们将字符串变量_textDateTime添加到YYYYWidgetState类中。我们把它交给构建器中的文本参数。当计时器出现时，我们更新_textDateTime。我们不再需要使用notify（）方法。它变得更容易理解。非常感谢。>Dinesh Balasubramanian我们似乎有点困惑。如果我们使用SetState更改值，图形将更新。但是我们设定的日期和时间没有改变。只有DateTime.now（）的值会更改。我们认为我们无法更新图纸。我们可以通过简单地创建一个字符串变量来解决这个问题。我们只是想了解一下它。我们还将研究ScopedModel的差异。