Flutter每分钟自动刷新JSON [英] Flutter refresh JSON every minute automatically

问题描述

我已经在网上搜索了自动刷新小部件，并为Flutter自动刷新了将来的JSON，但结果似乎都是下拉刷新.

I have searched the web for auto refresh widgets and auto refresh future JSON for Flutter but the results all seem to be for pull down refresh.

我需要的就像是一个我可以调用的函数，所说的函数每重复一分钟.

What I need is like a function that I can call and every minute that said function repeats.

我知道我必须整合类似的东西:

I know I have to integrate something like:

var future = new Future.delayed(const Duration(milliseconds: 10), TracksWidget());

但是我不确定该放在哪里.

However I am not sure where I need to put it.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../model/track.dart';

class TracksWidget extends StatefulWidget {
  @override
  _TracksWidgetState createState() => _TracksWidgetState();
}

class _TracksWidgetState extends State<TracksWidget> {
  Future<Track> track;

  @override
  Widget build(BuildContext context) {
    double c_width = MediaQuery.of(context).size.width;
    return new FutureBuilder<Track>(
      future: track,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          Track track = snapshot.data;
          return new Container(
              padding: const EdgeInsets.all(16.0),
              width: c_width,
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                        Image.network(track.imageurl, width:200.0, height: 200.0,fit: BoxFit.cover),
                        Text(track.title),
                        Text(track.artist),
              ]),
          );
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        //By default, show a loading spinner.
        return CircularProgressIndicator();
      },
    );
  }

  @override
  void initState() {
    super.initState();
    track = fetchTrack();
  }


  Future<Track> fetchTrack() async {
    final response =
        await http.get('http://139.59.108.222:2199/rpc/drn1/streaminfo.get');

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON.
      var responseJson = json.decode(response.body);
      // assume there is only one track to display
      // SO question mentioned 'display current track'
      var track = responseJson['data']
          .map((musicFileJson) => Track.fromJson(musicFileJson['track']))
          .first;
      return track;
    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
  }
}

推荐答案

我发现最简单的方法是使用Timer函数.

The simplest way to do this I have found is to use the Timer function.

如果将计时器放入initState，则它将在应用程序启动时启动. 在下面的代码中，计时器将每5秒调用一次addValue()方法，这将使该值每次增加1.只需记住在完成计时器后就将其丢弃.

If you put the timer into initState it will start when the the app is started. In the code below, the timer will call the addValue() method every 5 seconds which increases the value by one each time. Just remember to dispose of the timer when you have finished with it.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Timer timer;
  int counter = 0;

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(seconds: 5), (Timer t) => addValue());
  }

  void addValue() {
    setState(() {
       counter++; 
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(counter.toString())
          ],
        ),
      ),
    );
  }
}

这篇关于Flutter每分钟自动刷新JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！