Flutter页面切换时如何保存DropdownButtonFormField选中状态？

核心问题分析 #

1. Dropdown未绑定状态：当前DropdownButtonFormField的value固定为null，没有关联Bloc中存储的requestPaymentType值，导致每次UI重建时都会重置为未选中状态。
2. 直接修改Bloc状态：在onChanged中直接赋值(mainBloc.state as OrderPreview).requestPaymentType = value，违反了Bloc的状态更新规则——必须通过发送事件来更新状态，否则UI不会感知到变化并重建。
3. 缺少状态监听：OrderPreviewServices作为StatelessWidget，没有监听Bloc的状态变化，即使状态更新了，Dropdown也不会同步刷新。

修复步骤 #

1. 在Bloc中添加支付类型更新事件 #

首先在MainBloc中新增更新支付类型的事件：

class UpdatePaymentType extends MainBlocEvent {
  final RequestPaymentType? paymentType;
  UpdatePaymentType(this.paymentType);
}

然后在Bloc的mapEventToState中处理该事件，生成新的不可变状态实例：

@override
Stream<MainBlocState> mapEventToState(MainBlocEvent event) async* {
  if (event is UpdatePaymentType) {
    if (state is OrderPreview) {
      final currentState = state as OrderPreview;
      yield currentState.copyWith(
        requestPaymentType: event.paymentType,
      );
    }
  }
  // 保留其他原有事件处理逻辑
}

注：确保OrderPreview类有copyWith方法用于生成新状态实例，若没有需自行添加。

2. 修复Dropdown的状态绑定与更新逻辑 #

修改OrderPreviewServices中的Dropdown部分，通过BlocBuilder监听状态变化并绑定值：

BlocBuilder<MainBloc, MainBlocState>(
  builder: (context, state) {
    final selectedPaymentType = state is OrderPreview ? state.requestPaymentType : null;
    return DropdownButtonFormField<RequestPaymentType>(
      value: selectedPaymentType, // 绑定Bloc中的状态值
      decoration: InputDecoration(
        fillColor: CustomTheme.primaryColors.shade100,
        labelText: S.of(context).action_select_payment_type,
      ),
      icon: const Icon(Ionicons.chevron_down),
      items: <DropdownMenuItem<RequestPaymentType>>[
        DropdownMenuItem(
          value: RequestPaymentType.cash,
          child: Text(S.of(context).payment_in_cash),
        ),
        DropdownMenuItem(
          value: RequestPaymentType.card,
          child: Text(S.of(context).enum_paymentType_card),
        ),
      ],
      onChanged: (RequestPaymentType? value) {
        // 通过发送事件更新Bloc状态
        context.read<MainBloc>().add(UpdatePaymentType(value));
      },
    );
  },
)

3. 移除错误的直接状态修改代码 #

删除原onChanged中的违规代码：

// 移除以下两行
// (mainBloc.state as OrderPreview).requestPaymentType = value;
// print("odenisin novu =>${(mainBloc.state as OrderPreview).requestPaymentType}");

4. 状态保留说明 #

支付类型属于全局选择项，无需给PageView设置PageStorageKey，只要状态正确存储在Bloc中，切换PageView时Dropdown会通过BlocBuilder自动获取最新状态并保持选中。

额外注意事项 #

• 确保OrderPreview状态类为不可变类，所有属性设为final，仅通过copyWith生成新实例。
• 所有状态更新必须通过Bloc事件触发，禁止直接修改Bloc的state属性，这是保证UI正确响应状态变化的核心前提。

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