Riverpod Notifier状态更新后UI未更新及构建顺序问题

首先要明确：绝对不能在Widget的build方法中执行状态更新、导航这类副作用操作。build是纯UI构建方法，会被框架频繁调用，在此处执行副作用会导致状态循环更新、UI渲染逻辑混乱，这也是你当前问题的核心诱因之一。

一、修正副作用执行时机 #

将更新BLE版本、导航页面的代码，从build方法中移出，放到正确的触发时机里，比如：

• 用户选择BLE设备的点击回调
• BLE版本读取完成的异步回调

示例代码：

// 在设备选择页面的交互回调中执行
void onDeviceSelected() async {
  // 1. 异步读取BLE设备版本
  final bleVersion = await readBleVersionFromSelectedDevice();
  // 2. 更新状态（此时状态同步变更）
  ref.read(bleInformationProvider.notifier).updateVersion(bleVersion);
  // 3. 状态更新完成后，再导航到目标页面
  if (mounted) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => BleVersionPage()));
  }
}

这样操作后，目标页面构建时，Provider的状态已经是更新后的有效值，ref.watch会直接拿到最新的版本号，不会显示null。

二、优化状态监听逻辑（可选，增强健壮性） #

如果需要明确处理“等待版本值”“读取失败”等场景，可以将Provider改为返回AsyncValue类型，更清晰地管理状态生命周期：

修改Provider定义

@riverpod
class BleInformation extends _$BleInformation {
  @override
  AsyncValue<BleVersion> build() => const AsyncData(BleVersion(null));

  void updateVersion(int? value) {
    state = AsyncData(BleVersion(value));
    // 如果读取BLE版本是异步操作，可改为：
    // state = const AsyncLoading();
    // try {
    //   final version = await _fetchBleVersion();
    //   state = AsyncData(BleVersion(version));
    // } catch (e) {
    //   state = AsyncError(e, StackTrace.current);
    // }
  }
}

页面中监听状态

final bleState = ref.watch(bleInformationProvider);

return bleState.when(
  loading: () => const CircularProgressIndicator(),
  error: (err, stack) => Text('读取失败：$err'),
  data: (bleVersion) {
    if (bleVersion.version == null) {
      return const Text('等待设备版本数据...');
    }
    return Text('BLE版本：${bleVersion.version}');
  },
);

三、关键验证点 #

1. 确认BleVersion类的相等性：你的代码中使用了@immutable修饰，Dart会自动生成正确的==和hashCode方法，状态变更时能触发UI重建，这部分是没问题的。
2. 确认整个应用已被ProviderScope包裹：确保导航后的页面在同一个Provider作用域内，能正确访问到bleInformationProvider。

内容的提问来源于stack exchange，提问作者ultrapoci