Flutter：提供程序未更新 UI

Posted 2023-02-23

【中文标题】Flutter：提供程序未更新 UI

【英文标题】：Flutter: Provider not updating UI

【发布时间】：2022-01-14 17:59:02

【问题描述】：

我正在使用 Flutters provider 库，但我无法让它更新 UI。 我正在执行一个简单的HTTP POST 并希望在发生错误时更新我的​​ UI。

这是我的provider中的逻辑：

class DeviceProvider extends ChangeNotifier 
  // Enum with possible states: Initial, Loading, Error & Success
  APIState state = APIState.Initial;

  ...

  void sendConfig() async 
      try 
        http.Response postResponse = await http.post(...);

        if (postResponse.ok) 
          state = APIState.Success;
         else 
          state = APIState.Error;
      

       on SocketException catch (e) 
        state = APIState.Error;
      

      notifyListeners();
  

这是我的用户界面：

return ChangeNotifierProvider<DeviceProvider>(
      create: (_) => DeviceProvider(),
      child: Consumer<DeviceProvider>(
        builder: (_, model, __) 
          switch (model.state) 
            // Display error
            case  APIState.Error:
              return  Text('Error');
            // Ignore all other states
            case APIState.Loading:
            case APIState.Initial:
            case  APIState.Success:
              return const Visibility(
                child: Text("Gone"),
                visible: false,
              );
          
        ,
      ),
    );

我的 ma​​in.dart 看起来像这样：

void main() => runApp(
      MultiProvider(
        providers: [
          ...
          ChangeNotifierProvider<DeviceProvider>(create: (_) => DeviceProvider()),
        ],
        child: const MyApp(),
      ),
    );

现在，我知道代码已执行并且状态确实是Error。

但是，即使我调用 notifyListeners，我的错误小部件似乎也根本没有收到通知。

我错过了什么？

【问题讨论】：

这两个ChangeNotifierProvider是怎么回事？

尝试在您的提供程序的每次状态更改后添加notifyListeners()。

【参考方案1】：

我认为当您在 ui 中使用其他更改通知提供程序时会出现问题。当您触发发送配置功能时，您将使用您在 main.dart 中提供的更改通知提供程序触发它，这没关系。但是在您的用户界面中，您将消费者附加到另一个您尚未触发发送配置的提供者。

修复：不要返回 ChangeNotifierProvider 而只是返回一个消费者