Question

我正试图解析一个api。异步请求延迟了进度指示器显示的响应。但是获取响应后进度指示器不会消失。它仍然保留在屏幕上。

如何在获取响应时将进度加载器的状态更改为listview.builder？

这是我的代码。

    import 'dart:convert';

    import 'package:flutter/material.dart';

    import 'users.dart';
    import 'package:http/http.dart' as http;

    class HomePage extends StatefulWidget {
     @override
     _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {

    bool isLoading = false;

    List<Users> _users;
    Future<List<Users>> getUsers() async {
    var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    _users = usersFromJson(response.body);
    isLoading = true;

  }
  @override
  void initState() {
      setState(() {
        getUsers();
      });
  }


    @override
    Widget build(BuildContext context) {
     return Scaffold(
      appBar: AppBar(
       title: Text(isLoading ? "Parsed Json" : "Loading..."),
       backgroundColor: Colors.deepPurple,
      ),
       body: isLoading ? ListView.builder(
             itemCount: _users.length,
             itemBuilder: (BuildContext context,int index){
            return ListTile(
              leading: Image.network('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'),
              title:  Text(_users[index].name),
             );
         }) : Center(child: CircularProgressIndicator()),
        );
     }
    }

Answer 1

工作代码，请尝试

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = false;

  List<Users> _userList = [];

  Future<void> getUsers() async {
    isLoading = true;
    var response = await http
        .get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    var jsonResponse = jsonDecode(response.body);
    // print(jsonResponse);
    jsonResponse.forEach((data) {
      Users user = Users.fromMap(data);
      print(user);
      _userList.add(user);
    });
    isLoading = false;
  }

  @override
  void initState() {
    getUsers().then((value) => setState(() {}));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLoading ? "Loading..." : "Parsed Json"),
          backgroundColor: Colors.deepPurple,
        ),
        body: isLoading
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: _userList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(_userList[index].name),
                  );
                }));
  }
}

class Users {
  int id;
  String name;
  String username;
  Users({
    this.id,
    this.name,
    this.username,
  });
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'username': username,
    };
  }

  factory Users.fromMap(Map<String, dynamic> map) {
    if (map == null) return null;

    return Users(
      id: map['id'],
      name: map['name'],
      username: map['username'],
    );
  }

  String toJson() => json.encode(toMap());

  factory Users.fromJson(String source) => Users.fromMap(json.decode(source));

  @override
  String toString() => 'Users(id: $id, name: $name, username: $username)';
}

Answer 2

检查您的_user！= null而不是bool，然后显示列表，否则指示器

Answer 3

void initState（）方法在将此对象插入树中时调用。框架将为它创建的每个State对象精确地调用一次此方法。因此initState（）方法中不需要setState。

在响应后尝试设置setState，所以

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

  }



 Future<List<Users>> getUsers() async {
    isLoading = false;
    var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    _users = usersFromJson(response.body);
    print(_users);
    setState(() {
      isLoading = true;
    });

    return _users;
  }

进度指示器的状态未发生变化

3 个答案: