http调用后无法更新列表（颤动）

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 是一个简单的无状态小部件，return 一个文本。

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

Answer 2

试试这个：

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

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

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

class MyApp extends StatelessWidget {----------- }

class MyHomePage extends StatefulWidget {-----------}

class _MyHomePageState extends State<MyHomePage> {
  List data;

  Future<String> getData() async {
    var response = await http.get(
        Uri.encodeFull("https://api.github.com/users"),
        headers: {"Accept": "application/json"});

    this.setState(() {
      data = json.decode(response.body);
    });
    return "Success!";
  }

  @override
  void initState() {
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Listviews"),
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int position) {
          return new ListTile(
            title: new Text(data[position]['login'].toString()),
            subtitle: new Text(data[position]['url']),
            leading: new Image.network(data[position]['avatar_url']),
          );
        },
      ),
    );
  }
}

变得更加简单，并且可以正常工作。检查示例 here

http调用后无法更新列表（颤动）

not able to update list after http call ( flutter)

future

http

dart

flutter