iOS端Flutter切换obscureText时输入法类型异常问题求助

问题复现场景 #

• 涉及Flutter SDK 3.16、3.19、3.22版本
• iOS端专属问题：当TextField的obscureText从true切换为false时，日文输入法类型会自动变更；英文输入法、Android端无此异常

原示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ObscureText Issue')),
        body: const ObscureTextDemo(),
      ),
    );
  }
}

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

  @override
  State<ObscureTextDemo> createState() => _ObscureTextDemoState();
}

class _ObscureTextDemoState extends State<ObscureTextDemo> {
  bool _obscureText = true;
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            obscureText: _obscureText,
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              hintText: '输入内容',
              suffixIcon: IconButton(
                icon: Icon(
                  _obscureText ? Icons.visibility : Icons.visibility_off,
                ),
                onPressed: () {
                  setState(() {
                    _obscureText = !_obscureText;
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

修复方案 #

方案1：固定组件Key锁定输入框状态 #

给TextField设置唯一的GlobalKey，避免切换obscureText时Flutter重建输入框组件，同时显式指定输入参数锁定输入法类型：

class _ObscureTextDemoState extends State<ObscureTextDemo> {
  bool _obscureText = true;
  final _controller = TextEditingController();
  // 固定TextField的Key，防止组件重建导致输入法重置
  final _textFieldKey = GlobalKey<FormFieldState<String>>();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            key: _textFieldKey,
            controller: _controller,
            obscureText: _obscureText,
            keyboardType: TextInputType.text,
            inputFormatters: const [],
            decoration: InputDecoration(
              hintText: '输入内容',
              suffixIcon: IconButton(
                icon: Icon(
                  _obscureText ? Icons.visibility : Icons.visibility_off,
                ),
                onPressed: () {
                  setState(() {
                    _obscureText = !_obscureText;
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案2：切换时手动恢复焦点状态 #

通过FocusNode记录切换前的焦点状态，更新后延迟恢复焦点，避免输入法因焦点丢失重置：

class _ObscureTextDemoState extends State<ObscureTextDemo> {
  bool _obscureText = true;
  final _controller = TextEditingController();
  final _focusNode = FocusNode();

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            focusNode: _focusNode,
            controller: _controller,
            obscureText: _obscureText,
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              hintText: '输入内容',
              suffixIcon: IconButton(
                icon: Icon(
                  _obscureText ? Icons.visibility : Icons.visibility_off,
                ),
                onPressed: () {
                  final hadFocus = _focusNode.hasFocus;
                  setState(() {
                    _obscureText = !_obscureText;
                  });
                  // 延迟恢复焦点，确保组件更新完成
                  Future.microtask(() {
                    if (hadFocus) {
                      FocusScope.of(context).requestFocus(_focusNode);
                    }
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案3：替换为TextFormField #

TextFormField的状态管理逻辑更稳定，配合关闭自动验证可避免不必要的组件重建：

TextFormField(
  controller: _controller,
  obscureText: _obscureText,
  keyboardType: TextInputType.text,
  autovalidateMode: AutovalidateMode.disabled,
  decoration: const InputDecoration(
    hintText: '输入内容',
  ),
)

原因分析 #

iOS平台上，Flutter切换obscureText时会触发原生输入框视图的重新配置，日文输入法对这类配置变更的兼容性较差，导致输入法类型被重置；而英文输入法、Android端的输入框视图逻辑不同，因此未出现该问题。

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