如何在Flutter中实现和示例图一致的键盘布局

问题原因 #

你当前使用的TextInputType.phone是平台默认的电话键盘，不同系统渲染的键盘按键布局存在差异，无法匹配你需要的带小数点的数字键盘样式。

解决方案 #

方案1：使用系统自带带小数点的数字键盘（推荐） #

将keyboardType替换为TextInputType.numberWithOptions并开启decimal参数，同时可搭配输入过滤器限制输入内容，代码示例如下：

import 'package:flutter/services.dart';

TextField(
  // 开启decimal支持小数点，signed设为false不需要正负号
  keyboardType: const TextInputType.numberWithOptions(decimal: true, signed: false),
  // 限制仅可输入数字和小数点，避免其他字符输入
  inputFormatters: [
    // 正则中{0,2}代表限制最多输入2位小数，无位数需求可改为RegExp(r'^\d+\.?\d*')
    FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
  ],
)

该方案在iOS端会直接渲染出你需要的带小数点的数字键盘布局，安卓端会跟随系统数字键盘样式，无需额外开发成本。

方案2：自定义全局统一键盘 #

如果需要安卓和iOS端键盘布局完全和目标样式一致，消除系统差异，可以自行封装自定义数字键盘组件，替换系统默认键盘弹出逻辑即可。

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