Flutter List.Builder 获取 JSON答案

【问题标题】：Flutter List.Builder fetch JSONFlutter List.Builder 获取 JSON
【发布时间】：2021-10-22 14:02:33
【问题描述】：

这是我的代码：

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，但只返回 LoadingView()。它不显示 UserTile()。

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

我也无法以这种方式定义列表： List<User> _users = List<User>();

【问题讨论】：

标签： json list flutter flutter-listview flutter-build

【解决方案1】：

将 Future Builder 用于 JSON 和列表

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(),
),

【讨论】：

在使用 Future Builder 时如何使用过滤或搜索选项
获取的数据将存在于 Snapshot 变量中。您可以像列表一样以“snapshot.data”的形式访问快照。然后，您可以对这些数据做任何您想做的事情。

【解决方案2】：

改变

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

到

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

【讨论】：

如果您从 API 获取数据，请参考我的回答 here 或 here 或 here 希望对您的回答有所帮助我已使用 Futur 和 FutureBuilder 获取数据