You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改intl_phone_field 3.1.0中国家代码的字体样式?

问题原因

intl_phone_field 3.1.0 版本对不同区域的文本样式做了拆分控制:

  • 你当前配置的style属性仅生效于用户输入的手机号数字区域
  • 输入框前置的国家代码文本有独立的样式配置字段,不会继承style的配置,所以会出现只有数字字体变更、国家代码样式不生效的问题。
解决方法

给IntlPhoneField组件补充countryCodeStyle参数,将你需要的字体样式配置到该参数上即可,和style保持一致就能实现国家代码、手机号数字的样式统一。
如果你后续要开启国家选择下拉功能,下拉列表里的国家文本样式可以通过dropdownTextStyle参数单独配置。

修改后的完整代码参考:

Container(
  padding: EdgeInsets.all(20),
  child: Column(
    children: <Widget>[
      Container(
        child: IntlPhoneField(
          showCountryFlag: false,
          showDropdownIcon: false,
          keyboardType: TextInputType.number,
          // 手机号输入区域样式
          style: TextStyle(
              color: Colors.grey,
              fontFamily: 'DMSans',
              fontSize: 20,
              fontWeight: FontWeight.bold),
          // 新增:国家代码区域样式,和输入区样式保持一致即可
          countryCodeStyle: TextStyle(
              color: Colors.grey,
              fontFamily: 'DMSans',
              fontSize: 20,
              fontWeight: FontWeight.bold),
          decoration: InputDecoration(
              counterText: '', border: InputBorder.none),
          initialCountryCode: 'IN',
          onChanged: (phone) {
            print(phone.completeNumber);
            print(phone.countryCode);
            print(phone.number);
          },
        ),
      ),
    ],
  ),
)

内容的提问来源于stack exchange,提问作者Neel Moradiya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.28 19:48:28