http - http 调用后无法更新列表(flutter)

Question

我是 flutter 新手

我尝试进行 http 调用，然后填充列表。问题是 http 调用工作正常，但 UI 不刷新。 我认为问题在于框架在 http 调用完成之前使用列表创建 ui。当 http 调用完成后，我无法更新 ui。

我已经搜索过，但没有找到任何东西。

编辑 - 在 Listview.Builder 中找到解决方案 code here

http 调用

 static Future<Map> getData() async {
    try{
    http.Response res = await http.get("http://...."); 
    Map data = JSON.decode(res.body);
    print(res.body);
    return data;
    }
    catch(exception){
      //todo
    }

  }

主要

  class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _items = new List<GithubCardItem>();

  @override
  void initState() {
    super.initState();
    print("start download");
    _downloadData();
  }
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: new AppBar(title: new Text(widget.title)),
        body: new ListView.builder(
      itemBuilder: (BuildContext context, int index) => _items[index],
      itemExtent: 128.0,
      itemCount: _items.length,
    ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: (){
            _downloadData();
          },
        )
    );
  }




 GithubCard _extractDataFromJson(Map githubCard){
     GithubCard card = new GithubCard(githubCard["name"], githubCard["avatar_url"], githubCard["description"], githubCard["stargazers_count"], githubCard["open_issued_count"]);
     return card;
}

  void _downloadData(){
    MyHttpCall.getData().then((jsonData) {
      //check if i have card to display
      if(jsonData["items"] != null){
        for(var githubCard in jsonData["items"]){
          setState(() {
            GithubCard card = _extractDataFromJson(githubCard);
            this._items.add(new GithubCardItem(card));
          });
          print("adding elements");
        }
      }
    });
  }
}

GithubCardItem 是一个返回文本的简单无状态小部件。

Answer 1

使用ListView以及从网络获取数据有不同的方式 这是您的问题的示例代码

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List list = new List();
  void fetchData() {
    getData().then((res) {
      setState(() {
        list.addAll(res);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new ListView.builder(
          itemCount: list.length,
          itemBuilder: ((BuildContext _context, int position) {
            return new ListTile(
              title: new Text( list[position]['login'].toString()),
              subtitle: new Text(list[position]['url']),
              leading: new Image.network(list[position]['avatar_url']),
            );   
          }),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: fetchData,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }

  Future<List> getData() async {
    var url = "https://api.github.com/users";
    List data = new List();
    var httpClient = new HttpClient();
    var request = await httpClient.getUrl(Uri.parse(url));
    var response = await request.close();
    if (response.statusCode == HttpStatus.OK) {
      var jsonString = await response.transform(utf8.decoder).join();
      data = json.decode(jsonString);
      return data;      
    }else{
      return data;
    }
  }
}