Flutter List.Builder 获取 JSON

Question

这是我的代码：

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

class _HomePageState extends State<HomePage> {
  List<User> _users = <User>[];
  List<User> _usersDisplay = <User>[];

  @override
  void initState() {
    super.initState();
    fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users List'),
      ),
      body: SafeArea(
        child: Container(
          child: ListView.builder(
            itemBuilder: (context, index) {
              if (_usersDisplay.length > 0){
                return UserTile(user: this._usersDisplay[index]);
              }else{
                return LoadingView();
              }
            },
            itemCount: _usersDisplay.length + 1,
          ),
        ),
      ),
    );
  }
}

在执行 initStae() 时，它将 _usersDisplay.length 打印为 100 但仅 return LoadingView()。它不显示 UserTile()。

在构建内部检查 _usersDisplay.length 时，它始终为 0。为什么？

我也不能这样定义列表： List<User> _users = List<User>();

Answer 1

对 JSON 使用 Future Builder 并列出

FutureBuilder(
  builder: (context, snapshot) {

    // WHILE THE CALL IS BEING MADE AKA LOADING
    if (ConnectionState.active != null && !snapshot.hasData) {
      return Center(child: Text('Loading'));
    }

    // WHEN THE CALL IS DONE BUT HAPPENS TO HAVE AN ERROR
    if (ConnectionState.done != null && snapshot.hasError) {
      return Center(child: Text(snapshot.error));
    }

    // IF IT WORKS IT GOES HERE!
    return ListView.builder(
      itemCount: snapshot.data.length,
      itemBuilder: (context, index) {
        return Text(snapshot.data[index].toString());
      },
    );
  },
  future: getAllTodos(),
),

Answer 2

改变

fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
    });

至

fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
      setState(() {})
});

Flutter List.Builder 获取 JSON

Flutter List.Builder fetch JSON

json

list

flutter

flutter-listview

flutter-build