mysql - 如何让UI实时更新

Question

我有一个问题，让flutter中的UI仍然实时更新，我从JSON web获取数据，由node JS和MySQL制作。 我的用户界面如下所示。 Image Shown null

我不知道为什么会这样。首先，导航到该页面，它显示为空，然后我返回到上一页并执行相同的操作，并且它可以显示数据。 Image shows Data

我的问题是如何让数据始终实时更新？ 这是我的代码

import 'package:crophero/detail.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:crophero/home_page.dart';
import 'package:crophero/login_page.dart';
import 'package:crophero/api_provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'dart:io';

class SensorPage extends StatefulWidget {
  SensorPage({Key key, this.id, this.gh, this.idgh, this.namagh})
      : super(key: key);
  final int id;

  final int idgh;
  final String namagh;
  final List gh;
  static String tag = 'sensor-page';
  @override
  _SensorPageState createState() => new _SensorPageState();
}
Timer timer;
int suhu;
int rh;
int cahaya;
int air;
int tanah;
int angin;

class _SensorPageState extends State<SensorPage> {
  Future loadSensor() async {
    var jsonString = await http
        .get('$endPoint/data_realtime?user_id=$id&&gh_id=${widget.idgh}');
    final jsonResponse = json.decode(jsonString.body);

    setState(() {
      suhu = jsonResponse['suhu'];
      rh = jsonResponse['rh'];
      cahaya = jsonResponse['cahaya'];
      air = jsonResponse['air'];
      tanah = jsonResponse['tanah'];
      angin = jsonResponse['angin'];
    });
  }

  @override
  void initState() {
    super.initState();

    loadSensor();


    _buatlist();
  }
   @override
    void dispose() {
        super.dispose();
        timer.cancel();
    }

  List<Container> daftarSensor = new List();
  var karakter = [
    {

      "nama": "Air Temperature",
      "gambar": "temp.png",
      "warna": 0xFFD50000,
      "nilai": "$suhu *C"
    },
    {
      "nama": "Relative Humidity",
      "gambar": "rh.png",
      "warna": 0xFF33691E,
      "nilai": "$rh %"
    },
    {
      "nama": "Water Temperature",
      "gambar": "water.png",
      "warna": 0xFF0288D1,
      "nilai": "$air *C"
    },
    {
      "nama": "Light Intensity",
      "gambar": "light.png",
      "warna": 0xFFFFAB00,
      "nilai": "${cahaya} lux"
    },
    {
      "nama": "Soil Moisture",
      "gambar": "soil.png",
      "warna": 0xFF795548,
      "nilai": "$tanah"
    },
    {
      "nama": "Wind Velocity",
      "gambar": "wind.png",
      "warna": 0xFF00695C,
      "nilai": "${angin} m/s"
    },
  ];

  _buatlist() async {
    for (var i = 0; i < karakter.length; i++) {
      final karakternya = karakter[i];
      final data = karakter[i];
      final String gambar = karakternya["gambar"];

      daftarSensor.add(
        new Container(
          padding: new EdgeInsets.all(10.0),
          child: new Column(
            children: <Widget>[
              new Material(
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                      minWidth: 200.0,
                      height: 75.0,
                      onPressed: () {

                        Navigator.push(
                            context,
                            new MaterialPageRoute(
                                builder: (context) => new Detail(
                                      gambar: karakternya["gambar"],
                                      warna: karakternya["warna"],
                                      nilai: data["nilai"],
                                      nama: karakternya["nama"],
                                      idgh: widget.idgh,
                                      namagh: widget.namagh,
                                    )));
                      },
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              new Image.asset(
                                "img/$gambar",
                                fit: BoxFit.cover,
                                width: 50,
                              ),
                              SizedBox(width: 130),
                              Text((karakternya["nilai"]),
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 25,
                                  ),
                                  textAlign: TextAlign.left),
                            ],
                          ),
                          Text((karakternya["nama"]),
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                              ),
                              textAlign: TextAlign.end),
                        ],
                      ),
                    )
                  ],
                ),
                color: Color(karakternya["warna"]),
                borderRadius: BorderRadius.circular(20),
              ),
            ],
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: Container(
        height: 50,
        child: BottomAppBar(
          color: Colors.green[900],
          child: new Center(
            child: new Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 50.0),
                ),
              ],
            ),
          ),
        ),
      ),
      backgroundColor: Colors.white,
      appBar: new AppBar(
        backgroundColor: Colors.green[900],
        title: new Text(
          "${widget.namagh} ",
          style: new TextStyle(color: Colors.white),
        ),
      ),
      body: new ListView(
        children: daftarSensor,
      ),
    );
  }
}

Answer 1

它显示为空，因为状态尚未更新。一旦您重新进入此页面，它将调用 build() 并将应用更新的状态(之前从 loadSensor() 分配)，因此它可以正确显示。

我从您的代码中注意到，不能保证 _buatlist() 将在 loadSensor() 之后调用。由于 _buatlist() 期望从 loadSensor() 看到新更新的值，因此它们应该异步工作。

因此尝试将 daftarSensor 放入您的状态组中，一旦从 loadSensor() 加载新项目，调用 _buatlist() 构建 dafterSensor 并在 _buatlist() 内部调用 setState，然后它将更新 ListView。