Flutter中如何调整国家选择器宽度以适配手机号输入框布局

我来帮你搞定这个布局协调的问题，让CountryPicker和TextFormField在Row里看起来更和谐，给你几个实用的调整方案：

方案1：优化宽度分配比例 #

默认两个Expanded的flex值都是1，导致宽度各占一半，不太符合实际使用场景。你可以给国家选择器设置更小的flex占比，让手机号输入框占据更多宽度：

Row(
  children: <Widget>[
    // 国家选择器占1份宽度
    Expanded(
      flex: 1,
      child: CountryPicker(
        dense: true,
        showFlag: false,
        showDialingCode: true,
        showName: true,
        showCurrency: false,
        showCurrencyISO: false,
        // 统一文本样式匹配输入框
        textStyle: TextStyle(fontSize: 14),
        onChanged: (Country country) {
          setState(() => _selected = country);
          print(country.dialingCode);
          countryCode = country.dialingCode;
        },
        selectedCountry: _selected,
      ),
    ),
    SizedBox(width: 8), // 添加间距提升视觉舒适度
    // 手机号输入框占2份宽度
    Expanded(
      flex: 2,
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Mobile no.',
          border: OutlineInputBorder(),
        ),
        validator: (val) => val.length != 10 ? 'Enter a mobile number of 10 digits' : null,
        onChanged: (val) {
          setState(() => phone = val);
          phoneno = phone;
        },
      ),
    ),
  ],
)

方案2：统一组件高度 #

如果两者高度不一致，可以给CountryPicker包裹一个Container，固定高度来匹配TextFormField的默认高度：

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        height: 56, // 匹配TextFormField带label时的默认高度
        alignment: Alignment.centerLeft,
        child: CountryPicker(
          dense: true,
          showFlag: false,
          showDialingCode: true,
          showName: true,
          showCurrency: false,
          showCurrencyISO: false,
          padding: EdgeInsets.zero, // 去掉内部默认padding避免高度溢出
          onChanged: (Country country) {
            setState(() => _selected = country);
            print(country.dialingCode);
            countryCode = country.dialingCode;
          },
          selectedCountry: _selected,
        ),
      ),
    ),
    SizedBox(width: 8),
    Expanded(
      flex: 2,
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Mobile no.',
          border: OutlineInputBorder(),
        ),
        validator: (val) => val.length != 10 ? 'Enter a mobile number of 10 digits' : null,
        onChanged: (val) {
          setState(() => phone = val);
          phoneno = phone;
        },
      ),
    ),
  ],
)

额外优化小技巧 #

• 给CountryPicker的textStyle设置和输入框一致的字体大小、颜色，视觉上更统一
• 如果想要更贴合的样式，可以给包裹CountryPicker的Container添加和OutlineInputBorder一致的边框，让两个组件看起来像一个整体

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