Flutter应用中build方法执行两次致变量值异常的问题求助

为什么build方法会执行两次？ #

Flutter框架会根据场景多次调用build方法——比如组件初始化、屏幕旋转、父组件重建、依赖状态更新等，这是框架的设计特性，不是Bug。永远不要依赖build的执行次数或时机来做状态初始化/修改，这会导致不可预期的状态异常。

你的代码核心问题 #

1. 在build中调用setVisibility修改类成员变量（_hasCellNumber等）：build是纯UI构建方法，执行副作用（修改状态）会导致状态和UI不同步，多次执行时变量会被反复覆盖。
2. 使用ref.read而非ref.watch：ref.read不会监听Provider的状态变化，当trxnNotifierProvider的数据更新时，组件无法感知，第二次build可能拿到旧的或错误的数据。
3. 临时变量重复初始化：_date和_selectedDate每次build都会重新创建，若需要持久化选中日期，应存到组件状态中。

修复后的代码示例 #

直接在build中基于Provider的最新值计算UI所需状态，无需单独维护成员变量：

@override
Widget build(BuildContext context) {
  // 用watch监听Provider，确保每次build拿到最新数据
  final trxnProvider = ref.watch(trxnNotifierProvider);

  // 直接在build中计算可见性，避免状态副作用
  final hasCellNumber = trxnProvider.clientCellPhone?.isNotEmpty == true;
  final hasHomeNumber = trxnProvider.clientHomePhone?.isNotEmpty == true;
  final hasMLSNumber = trxnProvider.mlsNumber?.isNotEmpty == true;
  final propertyMLSNbr = hasMLSNumber ? trxnProvider.mlsNumber : null;

  // 持久化选中日期，放到组件状态中（比如StatefulWidget的state）
  final _selectedDate = DateTime.now(); // 若需保存选中值，移到initState或用state变量

  return Scaffold(
    body: Column(
      children: [
        // 直接使用计算后的变量控制UI显示
        if (hasCellNumber) Text("客户手机号已填写"),
        if (hasMLSNumber) Text("MLS编号: $propertyMLSNbr"),
        // 其他UI组件
      ],
    ),
  );
}

额外优化：监听Provider变化执行逻辑 #

如果需要在Provider数据更新时执行非UI逻辑（比如初始化其他状态），可以在initState中使用ref.listen：

@override
void initState() {
  super.initState();
  // 监听Provider状态变化，触发自定义逻辑
  ref.listen(trxnNotifierProvider, (previousData, newData) {
    // 这里可以处理数据更新后的操作，比如保存到本地等
  });
}

关键原则 #

• build必须是纯函数：仅根据当前状态生成UI，不修改任何外部状态。
• 依赖状态用ref.watch监听：确保组件随Provider数据变化自动更新，拿到最新值。
• 避免在build中做初始化：状态初始化放到initState、didChangeDependencies或交由Provider管理。

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