定期更新显示内容

时间:2018-08-30 12:19:16

标签: dart flutter

在波动中,我们希望定期更新显示。 当值更改时,我们可以更新显示。 但是,在这种情况下,设定值不会改变。 因此,我们不知道要如何触发更新显示。

我们从无状态小部件更改为有状态小部件。然后,我们在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(),
    );
  }
}

yyyyy_widget.dart

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

xxxxx_model.dart

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

1 个答案:

答案 0 :(得分:1)

您可以使用StreamBuilder来监听间隔流。它会自动管理订阅。

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