iOS端如何实现FlightAware式字母数字混合键盘？Flutter开发求助

方案1：自定义Flutter键盘组件 #

完全用Flutter实现自定义键盘，无需依赖原生代码，步骤如下：

• 给TextFormField设置keyboardType: TextInputType.none，禁用系统键盘
• 自定义包含字母、数字的键盘Widget（用GridView或Wrap布局按键）
• 监听按键点击事件，更新TextFormField的文本内容，同时处理退格、确认等逻辑

示例代码片段：

TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        TextFormField(
          controller: _controller,
          keyboardType: TextInputType.none,
          decoration: InputDecoration(hintText: "输入内容"),
        ),
        Expanded(child: Align(alignment: Alignment.bottomCenter, child: _buildCustomKeyboard())),
      ],
    ),
  );
}

Widget _buildCustomKeyboard() {
  List<String> keys = [
    '1','2','3','4','5','6','7','8','9','0',
    'Q','W','E','R','T','Y','U','I','O','P',
    'A','S','D','F','G','H','J','K','L',
    'Z','X','C','V','B','N','M','←','确认'
  ];
  
  return GridView.count(
    shrinkWrap: true,
    crossAxisCount: 10,
    children: keys.map((key) {
      return GestureDetector(
        onTap: () {
          if (key == '←') {
            if (_controller.text.isNotEmpty) {
              _controller.text = _controller.text.substring(0, _controller.text.length - 1);
            }
          } else if (key == '确认') {
            // 处理确认逻辑
          } else {
            _controller.text += key;
          }
        },
        child: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(2),
          color: Colors.grey[200],
          child: Text(key, style: TextStyle(fontSize: 18)),
        ),
      );
    }).toList(),
  );
}

方案2：借助第三方Flutter包 #

可以使用专门的自定义键盘包快速实现，比如flutter_custom_keyboard（需确认包的iOS兼容性）：

• 将包添加到pubspec.yaml
• 按照包的文档配置字母+数字的键盘布局
• 关联到TextFormField上替代系统键盘

方案3：原生iOS自定义输入视图（对接Flutter） #

如果需要和FlightAware的原生键盘体验完全一致，可通过Flutter的MethodChannel调用iOS原生代码实现：

1. 在iOS项目中创建自定义UIInputView，布局字母和数字按键
2. 实现按键点击回调，将输入内容传递给Flutter
3. 在Flutter中通过MethodChannel监听原生输入事件，更新文本控制器
4. 给TextFormField设置keyboardType: TextInputType.none，关联原生自定义键盘

iOS原生代码示例（Swift） #

// 创建自定义键盘类
class CustomAlphanumericKeyboard: UIInputView {
    var onKeyTap: ((String) -> Void)?
    
    override init(frame: CGRect, inputViewStyle: UIInputView.Style) {
        super.init(frame: frame, inputViewStyle: inputViewStyle)
        setupKeyboard()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupKeyboard()
    }
    
    private func setupKeyboard() {
        // 添加字母、数字按键的布局和点击事件
        let keyButton = UIButton(type: .system)
        keyButton.setTitle("1", for: .normal)
        keyButton.addTarget(self, action: #selector(keyTapped(_:)), for: .touchUpInside)
        addSubview(keyButton)
        // 布局逻辑省略...
    }
    
    @objc private func keyTapped(_ sender: UIButton) {
        guard let key = sender.titleLabel?.text else { return }
        onKeyTap?(key)
    }
}

// 在FlutterViewController中关联键盘
class FlutterViewController: FlutterViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let channel = FlutterMethodChannel(name: "com.example/custom_keyboard", binaryMessenger: self.binaryMessenger)
        channel.setMethodCallHandler { [weak self] call, result in
            if call.method == "showCustomKeyboard" {
                let customKeyboard = CustomAlphanumericKeyboard(frame: CGRect(x: 0, y: 0, width: self?.view.frame.width ?? 0, height: 250))
                customKeyboard.onKeyTap = { key in
                    channel.invokeMethod("keyPressed", arguments: key)
                }
                // 找到当前第一响应的输入框并设置自定义键盘
                if let textField = UIApplication.shared.keyWindow?.firstResponder as? UITextField {
                    textField.inputView = customKeyboard
                }
                result.success(nil)
            }
        }
    }
}

Flutter端代码示例 #

MethodChannel _channel = MethodChannel('com.example/custom_keyboard');

@override
void initState() {
  super.initState();
  _channel.setMethodCallHandler((call) async {
    if (call.method == 'keyPressed') {
      String key = call.arguments as String;
      // 更新文本控制器
      _controller.text += key;
    }
  });
}

// 触发显示自定义键盘
void _showCustomKeyboard() {
  _channel.invokeMethod('showCustomKeyboard');
}

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