如何使用 provider 包监听变化并在 flutter 中重建小部件？

Question

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

每当我从后端收到数据时，它应该会自动反映在 ui 中。为了反映 ui 中的变化，我正在使用状态管理提供程序 package.What 我应该做些什么来让我的小部件 rebuild 监听我使用提供程序包所做的更改；

Answer 1

如果您在 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);
             }
           })},
         );

请注意，在此代码段上方的某处，您应该有一个 ChangeNotifierProvider 将您的 MyState 注入到小部件树中。有关真正详尽和完整的指南，请查看 Simple state management

Answer 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 是我认为最好的。

Answer 3

**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;

如何使用 provider 包监听变化并在 flutter 中重建小部件？

How to listen to the changes and rebuild the widget in flutter using provider packge?

flutter

flutter-dependencies

flutter-layout

flutter-animation

flutter-web