如何加载数据以便ListView.builder从提供程序的数据进行构建

如何解决如何加载数据以便ListView.builder从提供程序的数据进行构建

我希望我的应用程序创建一个ListView.builder，其中包含使用提供程序和http软件包从后端API提取的用户数据。

提供商获取数据的方法（现在可以正常运行）：

  Future<List<User>> fetchUsersList() async {
   var resp = await UserService().getAllUsers();
    if (resp.statusCode == 200) {
     return userListFromJson(resp.body);
    } else {
     decodeErrorMessage(resp);
     return _usersList = [];
   }
 }

我用于创建ListView.builder的代码：

class _StaffViewState extends State<StaffView> {
    bool _searchaMode = false;
    bool _fetchingData = false;
    List<User> _userList = List<User>();

@override
Widget build(BuildContext context) {

    Provider.of<UserProvider>(context).fetchUsersList().then(
     (data) => this._userList = data);
   

return Consumer<UserProvider>(
  builder: (context,providerData,_) => Scaffold(
    appBar: AppBar(
      title: _searchaMode == false
          ? Text('Staff\s List')
          : TextField(
              autofocus: true,cursorColor: Colors.white,onSubmitted: (String value) async {
                await showDialog<void>(
                  context: context,builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text('Thanks!'),content: Text('You typed "$value".'),actions: <Widget>[
                        FlatButton(
                          onpressed: () {
                            Navigator.pop(context);
                          },child: const Text('OK'),),],);
                  },);
              },style: TextStyle(
                color: Colors.white,decoration: Inputdecoration(
                hintText: 'Search . . .',hintStyle: TextStyle(color: Colors.white),border: InputBorder.none,actions: [
        _searchaMode == false
            ? IconButton(
                onpressed: () {
                  setState(() {
                    _searchaMode = true;
                  });
                },icon: Icon(Icons.search),)
            : IconButton(
                onpressed: () {
                  setState(() {
                    _searchaMode = false;
                  });
                },icon: Icon(
                  Icons.cancel,color: Colors.tealAccent,RaisedButton.icon(
          onpressed: () async {},color: Colors.yellow.shade900,shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100.0),topLeft: Radius.circular(100.0),icon: Icon(
            Icons.add,size: 25.0,color: Colors.white,label: Text(
            'Add User',style: TextStyle(
              fontSize: 15.0,fontWeight: FontWeight.bold,drawer: AppSideNav(),body: _fetchingData == true
        ? pr.show()
        : ListView.builder(
            itemCount: _userList.length,itemBuilder: (context,index) {
              return Container(
                decoration: Boxdecoration(
                  border: Border(
                    bottom: BorderSide(
                      width: .9,color: Colors.yellow.shade700,child: ListTile(
                  leading: Image.network(
                      providerData.getUsersList()[index].image != null
                          ? providerData.getUsersList()[index].image
                          : 'https://via.placeholder.com/150'),title: Center(
                      child:
                          Text(providerData.getUsersList()[index].email)),subtitle: Center(
                      child: Text(providerData.getUsersList()[index].nid)),trailing:
                      providerData.getUsersList()[index].isAuthority == true
                          ? Text('Authority')
                          : providerData.getUsersList()[index].isstaff ==
                                  true
                              ? Text('Staff')
                              : Text('General User'),contentPadding: EdgeInsets.symmetric(horizontal: 20.0),visualDensity: VisualDensity.adaptivePlatformDensity,isThreeLine: false,onTap: () {},);
            },);
   }
 }

我的数据正在加载以构建列表。但是问题是发生了一个错误，说 在构建期间调用 setState（）或markNeedsBuild（）。

我的问题是，使用提供程序包填充数据的实际方法是什么，首先将执行dataFetching方法，然后将构建列表。

解决方法

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

    use api here
  }

,

您不应该在build内调用API，因为每次框架重建屏幕时都会有一个新调用，而是在initState()内调用它。

如果您需要等待API数据，请在FutureBuilder函数中使用build，这样一旦检索到数据，它将自动重建。

,

您可以简单地使用build小部件，而不必在initState函数的开头或FutureBuilder函数中调用提取函数。这样，您可以精确地指定仍在加载时显示的内容和完成时显示的内容，而无需添加越来越多的成员变量。

修改后的代码如下：

class _StaffViewState extends State<StaffView> {
  
  bool _searchaMode = false;

  @override
  Widget build(BuildContext context) {
    return Consumer<UserProvider>(
      builder: (context,providerData,_) => FutureBuilder(
        future: providerData.fetchUsersList(),builder: (context,snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return Text("Loading...");
          }

          List<User> userList = snapshot.data;

          return Scaffold(
            appBar: AppBar(
              title: _searchaMode == false
                  ? Text('Staff\s List')
                  : TextField(
                      autofocus: true,cursorColor: Colors.white,onSubmitted: (String value) async {
                        await showDialog<void>(
                          context: context,builder: (BuildContext context) {
                            return AlertDialog(
                              title: const Text('Thanks!'),content: Text('You typed "$value".'),actions: <Widget>[
                                FlatButton(
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },child: const Text('OK'),),],);
                          },);
                      },style: TextStyle(
                        color: Colors.white,decoration: InputDecoration(
                        hintText: 'Search . . .',hintStyle: TextStyle(color: Colors.white),border: InputBorder.none,actions: [
                _searchaMode == false
                    ? IconButton(
                        onPressed: () {
                          setState(() {
                            _searchaMode = true;
                          });
                        },icon: Icon(Icons.search),)
                    : IconButton(
                        onPressed: () {
                          setState(() {
                            _searchaMode = false;
                          });
                        },icon: Icon(
                          Icons.cancel,color: Colors.tealAccent,RaisedButton.icon(
                  onPressed: () async {},color: Colors.yellow.shade900,shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(100.0),topLeft: Radius.circular(100.0),icon: Icon(
                    Icons.add,size: 25.0,color: Colors.white,label: Text(
                    'Add User',style: TextStyle(
                      fontSize: 15.0,fontWeight: FontWeight.bold,drawer: AppSideNav(),body: ListView.builder(
                    itemCount: userList.length,itemBuilder: (context,index) {
                      return Container(
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              width: .9,color: Colors.yellow.shade700,child: ListTile(
                          leading: Image.network(
                              providerData.getUsersList()[index].image != null
                                  ? providerData.getUsersList()[index].image
                                  : 'https://via.placeholder.com/150'),title: Center(
                              child: Text(
                                  providerData.getUsersList()[index].email)),subtitle: Center(
                              child:
                                  Text(providerData.getUsersList()[index].nid)),trailing: providerData
                                      .getUsersList()[index]
                                      .isAuthority ==
                                  true
                              ? Text('Authority')
                              : providerData.getUsersList()[index].isStaff ==
                                      true
                                  ? Text('Staff')
                                  : Text('General User'),contentPadding:
                              EdgeInsets.symmetric(horizontal: 20.0),visualDensity: VisualDensity.adaptivePlatformDensity,isThreeLine: false,onTap: () {},);
                    },);
        },);
  }
}