Flutter List.Builder 获取 JSON

Posted 2023-02-23

【中文标题】Flutter List.Builder 获取 JSON

【英文标题】：Flutter List.Builder fetch 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>();

【参考方案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 获取数据