Flutter中obscureText设为true的TextField无障碍朗读异常问题及解决方案咨询

当TextField开启obscureText: true后，默认会将输入内容替换为掩码字符（如•），部分设备的屏幕阅读器会把这个掩码误识别为“句号”或“点”，导致视障用户无法知晓实际输入内容。以下是几种可行的解决方案：

方案一：通过Semantics组件手动控制朗读内容 #

这是最可靠的方案，通过监听输入内容变化，直接告诉屏幕阅读器实际输入的字符，绕过掩码的识别问题：

class PasswordInputField extends StatefulWidget {
  const PasswordInputField({super.key});

  @override
  State<PasswordInputField> createState() => _PasswordInputFieldState();
}

class _PasswordInputFieldState extends State<PasswordInputField> {
  final _passwordController = TextEditingController();
  String _currentInput = '';

  @override
  void initState() {
    super.initState();
    // 监听输入变化，实时更新朗读内容
    _passwordController.addListener(() {
      setState(() {
        _currentInput = _passwordController.text;
      });
    });
  }

  @override
  void dispose() {
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Semantics(
      label: '密码输入框',
      // 设置实际输入内容作为朗读值
      value: _currentInput,
      // 标记为密码类型，符合无障碍规范
      isPassword: true,
      child: TextField(
        controller: _passwordController,
        obscureText: true,
        decoration: const InputDecoration(
          labelText: 'Password',
          hintText: 'Enter your password',
        ),
      ),
    );
  }
}

方案二：替换掩码字符为标准密码符号 #

部分设备的屏幕阅读器对默认掩码字符•识别有误，可以尝试替换为更通用的密码圆点●，辅助优化识别效果：

TextField(
  controller: _passwordController,
  obscureText: true,
  // 替换掩码字符为标准密码圆点
  obscuringCharacter: '●',
  decoration: const InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
  ),
)

注意事项 #

• 方案一优先推荐，因为它直接控制了无障碍朗读的内容，不受设备或屏幕阅读器的差异影响
• 密码场景下，实时朗读输入内容是合理的——这是用户自身的操作反馈，不会造成密码泄露风险

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