Flutter - Providers 和 Future 调用，如何共享同一个实例？

如何解决Flutter - Providers 和 Future 调用，如何共享同一个实例？

我正在学习 Flutter，但有些东西我无法理解。我用一个包（infine_scroll_pagination）实现了一个无限滚动分页，它工作正常，但此 Package 获取的数据来自 Future 调用，该调用从 WEB 获取数据，并在我的 Provider Class 中对其进行解析。>

我的问题是，data 加载的 Infinite Scroll widget 无法在其 state 中的其他任何地方访问。

示例：让我们以一次 contact list 加载 10 个联系人：

class ContactsBody extends StatefulWidget {
  @override
  _ContactsBodyState createState() => _ContactsBodyState();
}

class _ContactsBodyState extends State<ContactsBody> {
  static const _pageSize = 10;
  final PagingController<int,Contact> pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    super.initState();
    pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = await ContactsService().fetchContactsPaged(pageKey,_pageSize);
      final isLastPage = newItems.length < _pageSize;

      if (isLastPage) {
        pagingController.appendLastPage(newItems.contacts);
      } else {
        final nextPageKey = pageKey + 1;
        pagingController.appendPage(newItems.contacts,nextPageKey);
      }
    } catch (error) {
      pagingController.error = error;
    }
  }
  @override
  Widget build(BuildContext context) {
    return ContactsList(pagingController);
  }

  @override
  void dispose() {
    pagingController.dispose();
    super.dispose();
  }

所以基本上这个 Infinite Scroll 包将获取我的联系人，一次 10 个，这里是我的 ContactsService 调用：

 Future<Contacts> fetchContactsPaged(int pageKey,int pageSize) async {
    final response = await http.get(.....);

    if (response.statusCode == 200) {
    return Contacts.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load contacts');
    }
  }

最后，正如您在上面看到的那样，它使用其工厂方法“Provider class”初始化我的 fromJson()（联系人），并返回 parsed data。

现在我的Provider class：

class Contacts extends ChangeNotifier {
      List<Contact> _contacts = <Contact>[];
    
      Contacts();
    
      factory Contacts.fromJson(final Map<String,dynamic> json) {
        final Contacts contacts = Contacts();
        if (json['data'] != null) {
          json['data'].forEach((contact) {
            contacts.add(Contact.fromJson(contact));
          });
        }
        return contacts;
      }

  void add(final Contact contact) {
    this._contacts.add(contact);
    this.notifyListeners();
  }

我在这里遇到的问题是，当加载 Inifinite Scroll listView 时，例如我更改了单个联系人的 state（例如可以将联系人设置为收藏），>

如何访问 SAME instanc 的 Contacts() classe，FUTURE 调用已初始化，以便我可以访问该类中数据的 current state？

当然，如果我将更改 POST 到 API，并在需要的地方重新获取新值，我将获得数据的更新状态，但我想了解如何访问相同的数据在这里实例并使当前数据在应用程序内随处可用

解决方法

编辑：我删除了原始答案，以便更好地说明 OP 想要实现的目标。

我在 GitHub 上做了一个 repo 来尝试向您展示您想要实现的目标：https://github.com/Kobatsu/stackoverflow_66578191

您的代码中有一些令人困惑的地方：

何时创建对象的实例（ContactsService、Contacts）
提供程序使用
（访问 pagingController 的列表？）
解析 JSON / 使用工厂方法

存储库结果如下：

当您更新列表时（通过向下滚动），黄色容器会更新联系人数量和收藏夹数量。如果您点击某个联系人，它就会成为收藏夹，并且黄色容器也会更新。

我对存储库进行了评论，以向您解释每个部分。

注意：您代码中的 Contacts 类变成了我的 ContactProvider。

进行 API 调用的 ContactsService 类：

class ContactsService {
  static Future<List<Contact>> fetchContactsPaged(
      int pageKey,int pageSize) async {
    // Here,you should get your data from your API

    // final response = await http.get(.....);
    // if (response.statusCode == 200) {
    //   return Contacts.fromJson(jsonDecode(response.body));
    // } else {
    //   throw Exception('Failed to load contacts');
    // }

    // I didn't do the backend part,so here is an example
    // with what I understand you get from your API:
    var responseBody =
        "{\"data\":[{\"name\":\"John\",\"isFavorite\":false},{\"name\":\"Rose\",\"isFavorite\":false}]}";
    Map<String,dynamic> decoded = json.decode(responseBody);
    List<dynamic> contactsDynamic = decoded["data"];

    List<Contact> listOfContacts =
        contactsDynamic.map((c) => Contact.fromJson(c)).toList();

    // you can return listOfContacts,for this example,I will add 
    // more Contacts for the Pagination plugin since my json only has 2 contacts
    for (int i = pageKey + listOfContacts.length; i < pageKey + pageSize; i++) {
      listOfContacts.add(Contact(name: "Name $i"));
    }
    return listOfContacts;
  }
}

提供者的使用：

Consumer<ContactProvider>(
        builder: (_,foo,__) => Container(
              child: Text(
                  "${foo.contacts.length} contacts - ${foo.contacts.where((c) => c.isFavorite).length} favorites"),padding: EdgeInsets.symmetric(
                  horizontal: 20,vertical: 10),color: Colors.amber,)),Expanded(child: ContactsBody())
  ]),)

ContactsBody 类中的获取页面方法，我们将联系人添加到我们的 ContactProvider 中：

  Future<void> _fetchPage(int pageKey) async {
    try {
      // Note : no need to make a ContactsService,this can be a static method if you only need what's done in the fetchContactsPaged method
      final newItems =
          await ContactsService.fetchContactsPaged(pageKey,_pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingController.appendPage(newItems,nextPageKey);
      }

      // Important : we add the contacts to our provider so we can get
      // them in other parts of our app
      context.read<ContactProvider>().addContacts(newItems);
    } catch (error) {
      print(error);
      _pagingController.error = error;
    }
  }

ContactItem 小部件，我们在其中更新最喜欢的状态并通知听众：

class ContactItem extends StatefulWidget {
  final Contact contact;
  ContactItem({this.contact});

  @override
  _ContactItemState createState() => _ContactItemState();
}

class _ContactItemState extends State<ContactItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
        child: Padding(child: Row(children: [
          Expanded(child: Text(widget.contact.name)),if (widget.contact.isFavorite) Icon(Icons.favorite)
        ]),padding: EdgeInsets.symmetric(vertical: 8,horizontal: 10),),onTap: () {
          // the below code updates the item
          // BUT others parts of our app won't get updated because
          // we are not notifying the listeners of our ContactProvider !
          setState(() {
            widget.contact.isFavorite = !widget.contact.isFavorite;
          });

          // To update other parts,we need to use the provider
          context.read<ContactProvider>().notifyContactUpdated(widget.contact);
        });
  }
}

还有 ContactProvider :

class ContactProvider extends ChangeNotifier {
  final List<Contact> _contacts = [];
  List<Contact> get contacts => _contacts;

  void addContacts(List<Contact> newContacts) {
    _contacts.addAll(newContacts);
    notifyListeners();
  }

  void notifyContactUpdated(Contact contact) {
    // You might want to update the contact in your database,// send it to your backend,etc...
    // Here we don't have these so we just notify our listeners :
    notifyListeners();
  }
}

Flutter - Providers 和 Future 调用，如何共享同一个实例？

如何解决Flutter - Providers 和 Future 调用，如何共享同一个实例？

解决方法

相关推荐