Flutter：如何为country_code_picker等国家选择下拉库设置回显值

问题原因及修复方案 #

你遇到的问题可以分为创建阶段数据存储异常和编辑阶段回显失效两类，具体原因和修复方法如下： #

一、创建阶段Firestore中countrycode为空的原因&修复

• 你给CountryCodePicker设置初始值后，只有用户手动切换国家触发onChanged时才会给countrycode赋值，如果用户创建时没有修改默认国家，countrycode就会是空字符串存入数据库。
• CountryCodePicker的initialSelection参数接收的是两位国家ISO代码（比如中国是CN、英国是GB），你填的EN是语言码，会导致初始值匹配异常。
• SelectState的onCityChanged回调没有加setState，cityvalue更新不会触发状态刷新，可能导致存储的城市数据不是用户实际选择的内容。

创建阶段修正代码示例：

// 初始化变量时直接赋值对应初始国家的信息，避免未触发onChanged时数据为空
String countryvalue = 'United Kingdom';
String countrycode = '+44';
String cityvalue = '';
String statevalue = '';

// CountryCodePicker修正
CountryCodePicker(
  initialSelection: 'GB', // 英国的国家代码为GB，不要填EN
  onInit: (CountryCode? code) {
    // 兜底获取初始国家的信息，避免初始化赋值和组件默认值不一致
    if (code != null) {
      countrycode = code.dialCode ?? '+44';
      countryvalue = code.name ?? 'United Kingdom';
    }
  },
  onChanged: (CountryCode country){
    setState(() {
      countrycode = country.dialCode!;
      // 同步更新国家名，和下方SelectState的选择保持一致，避免两个组件选中的国家不匹配
      countryvalue = country.name!;
    });
  },
)

// SelectState修正
SelectState(
  onCountryChanged: (String value) {
    setState(() {
      countryvalue = value;
    });
  },
  onCityChanged: (String value) {
    setState(() { // 补充setState触发状态更新
      cityvalue = value;
    });
  },
  onStateChanged: (String value) {
    setState(() {
      statevalue = value;
    });
  },
)

建议你在存储数据时额外新增country_iso字段存国家的两位ISO代码，后续编辑页回显时会更方便。

二、编辑页回显失效的原因&修复

• Flutter中widget的属性是不可变的，你在State中直接修改widget.country、widget.countrycode的写法不符合规范，应该用State内部的本地变量存储更新后的数值，触发UI刷新。
• country_state_city_picker的SelectState组件需要主动传入defaultCountry、defaultState、defaultCity三个参数设置默认选中值，你只声明了回调函数，组件不知道要回显的内容，自然不会自动选中。
• 你给CountryCodePicker的initialSelection传的是存储的拨号码（比如+86），但这个参数需要接收国家ISO代码，匹配不上就会显示默认值，不会回显目标国家。

编辑阶段修正代码示例：

class EditAdPageState extends State<EditAdPage> {
  // 定义State内部的本地变量存储数据
  late String country;
  late String city;
  late String state;
  late String countrycode;
  late String countryIsoCode; // 存储国家ISO代码用于CountryCodePicker回显

  @override
  void initState() {
    super.initState();
    // 初始化时从widget获取存储的历史数据
    country = widget.country;
    city = widget.city;
    state = widget.state;
    countrycode = widget.countrycode;
    // 如果存储时没有存ISO代码，可以用库自带方法转换：countryIsoCode = CountryCode.fromName(country)?.code ?? 'GB';
    countryIsoCode = widget.countryIso;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CountryCodePicker(
          initialSelection: countryIsoCode, // 传国家ISO代码，不是拨号码
          onChanged: (CountryCode country){
            setState(() {
              countrycode = country.dialCode!;
              country = country.name!;
            });
          },
        ),
        SelectState(
          // 传入三个默认值参数触发回显
          defaultCountry: country,
          defaultState: state,
          defaultCity: city,
          onCountryChanged: (String value) {
            setState(() {
              country = value;
            });
          },  
          onCityChanged: (String value) {
            setState(() {
              city = value;
            });
          },
          onStateChanged: (String value) {
            setState(() {
              state = value;
            });
          },
        )
      ],
    );
  }
}

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