Flutter编辑页城市下拉框无法初始化用户已保存值问题

核心问题分析 #

你的代码存在几个关键问题导致城市下拉框无法正常初始化：

• _updateCities 方法重复调用 getUserProfile，完全冗余且违背方法职责
• 未维护选中国家的状态变量，导致城市下拉框的选项列表初始为空或不匹配
• 表单赋值时机错误，未确保城市列表加载完成后再设置初始值

具体修复步骤 #

1. 添加状态变量维护选中国家与城市列表

在 _ProfilePageState 中新增状态变量，跟踪当前选中的国家和对应的城市列表：

class _ProfilePageState extends ConsumerState<ProfilePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  late AppUser? usr;
  Country? selectedCountry; // 新增：跟踪当前选中的国家
  List<String> cities = []; // 维护当前国家对应的城市列表

  // ... 其余代码
}

2. 重构 _loadInitialData 方法，正确初始化数据

移除冗余的异步调用，先加载用户数据，再匹配对应国家和城市，最后更新状态并赋值表单：

Future<void> _loadInitialData() async {
  final countries = ref.read(countriesProvider).countries;
  // 先获取用户资料
  await ref.read(userProvider.notifier).getUserProfile();
  usr = ref.read(userProvider.select((value) => value.user));
  
  if (usr?.country != null) {
    // 匹配用户已选的国家
    selectedCountry = countries.byName(usr!.country!);
    // 更新城市列表为该国家的城市
    cities = selectedCountry!.cities.names;
    // 确保表单在城市列表加载完成后再赋值
    _patchFormData();
  }
}

// 单独抽离表单赋值逻辑，避免代码冗余
void _patchFormData() {
  if (usr == null || selectedCountry == null) return;
  
  final city = selectedCountry!.cities.byName(usr!.city ?? '');
  _formKey.currentState?.patchValue({
    'full_name': usr?.fullName ?? '',
    'phone_number': usr?.phone ?? '',
    'email': usr?.email ?? '',
    'street_address': usr?.streetAddress ?? '',
    'apartment': usr?.apartmentNumber ?? '',
    'country': usr?.country ?? '',
    'city': city.name,
    'zip_code': usr?.zipCode ?? '',
    'gender': usr?.gender ?? '',
  });
}

3. 修复 _updateCities 方法，聚焦职责

该方法只需根据传入的国家更新城市列表，若有保存的城市则同步更新表单：

void _updateCities(Country? country, [String? savedCity]) {
  if (country == null) {
    cities = [];
    selectedCountry = null;
    return;
  }
  
  selectedCountry = country;
  cities = country.cities.names;
  
  // 如果有保存的城市，更新表单的城市值
  if (savedCity != null && cities.contains(savedCity)) {
    _formKey.currentState?.patchValue({'city': savedCity});
  }
}

4. 调整Build方法中的下拉框配置

确保城市下拉框的选项列表绑定到维护的 cities 变量，避免空指针：

@override
Widget build(BuildContext context) {
  // 其他代码...
  
  CustomFormDropdown<String>(
    title: "Country",
    name: 'country',
    values: ref.read(countriesProvider).countries.names,
    onChanged: (value) {
      if (value == null) return;
      final country = ref.read(countriesProvider).countries.byName(value);
      _updateCities(country);
    },
  ),
  CustomFormDropdown<String>(
    title: "City",
    name: 'city',
    values: cities, // 绑定到维护的城市列表
    enabled: selectedCountry != null, // 未选中国家时禁用城市下拉框
  ),
  
  // 其他表单字段...
}

关键注意事项 #

• 始终确保城市列表加载完成后再给表单赋值，否则下拉框无法匹配到选项
• 维护 selectedCountry 状态，避免每次都重新读取国家数据
• 禁用未选中国家时的城市下拉框，提升用户体验

内容的提问来源于stack exchange，提问作者Yasir Arefin Tusher