如何使用提供程序包收听更改并在颤振中重建小部件？

Posted 2023-02-23

【中文标题】如何使用提供程序包收听更改并在颤振中重建小部件？

【英文标题】：How to listen to the changes and rebuild the widget in flutter using provider packge?

【发布时间】：2021-11-09 22:26:20

【问题描述】：

我面临的问题是， 我正在使用订阅方法（graphql 客户端）将我的 ui 连接到带有 websocket 的后端。这意味着我的 ui 和后端之间存在连接。我将从后端获得的数据存储在本地存储中 我正在从本地存储中获取该数据，

每当我从后端收到数据时，它应该会自动反映在 UI 中。为了反映 ui 的变化，我正在使用状态管理提供程序包。我应该怎么做才能使我的小部件在听取我使用提供程序包所做的更改时重建；

【参考方案1】：

**best way to listen changes in provider its to make getter and setter i will show you example below**
 class ContactProvider with ChangeNotifier 
     bool isBusy = true;
    bool get IsBusy => isBusy;
    set IsBusy(bool data) 
        this.isBusy = data;
        notifyListeners();
      
void maketru()
IsBusy=false;

现在你可以使用这个context.read<ContactProvider>().Isbusy;

【讨论】：

ok Muhammad Arbaz Zafar，这很有帮助。

【参考方案2】：

class MyNotifier extends ChangeNotifier 
   bool _listenableValue = false;
   bool get listenableValue => _listenableValue

   MyNotifier.instance();

   void setValue()
      _listenableValue = !_listenableValue;
      notifyListeners();
   



...

@override
Widget build(BuildContext context) 
   return ChangeNotifierProvider<MyNotifier>(
       create: (context) => MyNotifier.instance(),
       builder: (context, child)
          return Column(
             children: [
                StaticWidget(),
                //This text widget will rebuild when value is changed
                Selector<MyNotifier, bool>(
                  selector: (_, notifier) => notifier.listenableValue,
                  builder: (_, value, __) => Text('$value');
                ),
                //Change value with button
                IconButton(
                  icon: //icon
                  onPressed: ()
                    context.read<MyNotifier>().setValue();
                  ,
                );
             ]
          );
       
   );

不要使用Consumer。当数据发生变化时，消费者将重建所有小部件。这对性能不利。 Selector 在我看来是最好的。

【参考方案3】：

如果您在 ChangeNotifier 中有您的状态，例如：

class MyState extends ChangeNotifier
addStorage(Map<String, String> data) ...
getAllDataFromStorage() ...

然后您可以通过将所需的小部件包装在 Consumer 中来重建您的 UI。

Consumer<MyState>(builder: (context, state) 
return Container(
           padding: EdgeInsets.only(top: 10),
           child: LayoutBuilder(builder: (context, constraints) 
             if (screenLayout >= 1024) 
               return desktopWidget(context, visitsList);
              else if (screenLayout >= 768 && screenLayout <= 1023) 
               return tabletWidget(context, visitsList);
              else 
               return mobileWidget(context, visitingsList, screenLayout);
             
           ),
         );

请注意，在此 sn-p 上方的某个位置，您应该有一个 ChangeNotifierProvider 在小部件树中注入您的 MyState。 如需真正彻底和完整的指南，请查看Simple state management

【讨论】：

抛出异常。在构建期间调用 setState() 或 markNeedsBuild