Flutter IntlPhoneField如何实现国家代码选择器与输入框水平居中对齐

• 修正PhoneFieldContainer的上下内边距为统一值，避免容器本身带来垂直偏移
• 移除IntlPhoneField输入装饰中的isCollapsed: true配置，该配置会取消输入框默认的内边距适配逻辑，极易导致内容错位
• 给IntlPhoneField添加countryCodeAlignment: Alignment.center参数，强制国家代码选择器垂直居中
• 给输入装饰新增contentPadding配置，统一输入文本的垂直内边距，和国家代码组件对齐

修改后的完整代码如下：

class RoundedPhoneField extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final ValueChanged<String> onChanged;
  const RoundedPhoneField({
    Key? key,
    required this.hintText,
    this.icon = Icons.person,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PhoneFieldContainer(
      child: IntlPhoneField(
        decoration: InputDecoration(
          labelText: hintText,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          border: InputBorder.none,
          // 新增统一垂直内边距
          contentPadding: EdgeInsets.symmetric(vertical: 8),
        ),
        initialCountryCode: 'ZM',
        // 新增国家代码选择器居中配置
        countryCodeAlignment: Alignment.center,
        // 可选：如果还有细微偏差可以调整国家代码块的内边距
        // countryCodePadding: EdgeInsets.symmetric(vertical: 2),
        onChanged: (phone) {
          onChanged(phone.completeNumber);
        },
      ),
    );
  }
}


class PhoneFieldContainer extends StatelessWidget {
  final Widget child;
  const PhoneFieldContainer({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      // 修正上下内边距为统一值
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
      width: size.width * 0.8,
      decoration: BoxDecoration(
        color: kPrimaryLightColor,
        borderRadius: BorderRadius.circular(29),
      ),
      child: child,
    );
  }
}

如果调整后还有细微的上下偏差，可以根据实际显示效果微调contentPadding和countryCodePadding的数值即可。

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