Flutter中TextField实现大写密码输入遇兼容问题，求解决方案

问题分析 #

当obscureText设为true时，系统会切换到密码专用键盘，此时TextCapitalization的配置会被系统忽略（iOS平台的限制更严格），这就是为什么你的代码在iOS上完全无效、Android上偶发失效的原因。要同时实现键盘默认大写+输入内容强制转为大写+密码隐藏，可以用以下几种方案解决：

方案1：组合输入格式化器与文本控制器 #

通过UpperCaseTextInputFormatter强制输入内容转大写，配合TextEditingController同步文本状态，同时调整键盘配置让textCapitalization生效：

import 'package:flutter/services.dart';

void main(List<String> args) {
  final TextEditingController _passwordController = TextEditingController();
  
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: TextField(
          controller: _passwordController,
          autocorrect: false,
          enableSuggestions: false,
          keyboardType: TextInputType.text,
          textCapitalization: TextCapitalization.characters,
          obscureText: true,
          inputFormatters: [
            UpperCaseTextInputFormatter(),
          ],
          onChanged: (value) {
            _passwordController.value = TextEditingValue(
              text: value.toUpperCase(),
              selection: _passwordController.selection,
            );
          },
        ),
      ),
    ),
  ));
}

• 关闭autocorrect和enableSuggestions是为了避免系统键盘自动切换到小写模式
• 改用TextInputType.text替代默认密码键盘，让textCapitalization配置生效

方案2：iOS专属优化 #

如果方案1在iOS上仍不生效，可以用CupertinoTextField替代Material风格的TextField，iOS对自家组件的键盘配置支持更友好：

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

void main(List<String> args) {
  final TextEditingController _passwordController = TextEditingController();
  
  runApp(CupertinoApp(
    home: CupertinoPageScaffold(
      child: Center(
        child: CupertinoTextField(
          controller: _passwordController,
          autocorrect: false,
          textCapitalization: TextCapitalization.characters,
          obscureText: true,
          inputFormatters: [UpperCaseTextInputFormatter()],
          onChanged: (value) {
            _passwordController.value = TextEditingValue(
              text: value.toUpperCase(),
              selection: _passwordController.selection,
            );
          },
        ),
      ),
    ),
  ));
}

方案3：自定义密码输入组件 #

如果以上方案都无法满足需求，可以彻底绕过系统密码键盘的限制，自定义一个分离"实际输入文本"和"显示文本"的组件：

class UpperCasePasswordField extends StatefulWidget {
  @override
  _UpperCasePasswordFieldState createState() => _UpperCasePasswordFieldState();
}

class _UpperCasePasswordFieldState extends State<UpperCasePasswordField> {
  final TextEditingController _controller = TextEditingController();
  String _maskedText = '';

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final upperText = _controller.text.toUpperCase();
      setState(() {
        _maskedText = '*' * upperText.length;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      textCapitalization: TextCapitalization.characters,
      autocorrect: false,
      enableSuggestions: false,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(hintText: '输入密码'),
      style: const TextStyle(color: Colors.transparent),
      foregroundDecoration: BoxDecoration(
        child: Text(
          _maskedText,
          style: const TextStyle(color: Colors.black),
        ),
      ),
    );
  }
}

• 实际输入的是大写文本，但显示给用户的是掩码字符
• 完全不受系统密码键盘的限制，键盘始终保持大写状态

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