Flutter点击全选TextFormField时键盘遮挡输入框问题求助

需求与异常 #

• 开发需求：点击TextFormField时自动全选所有文本，仅允许用户删除原有内容并输入新值，禁止修改原有内容。
• 异常表现：触发全选操作时，键盘会遮挡TextFormField；无全选的常规点击场景下，键盘显示正常。

核心代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = TextEditingController();
  final _textFieldKey = GlobalKey<FormFieldState>();
  final ScrollController _scrollController = ScrollController();

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

  @override
  Widget build(BuildContext context) {
    _textController.text = "DemoText";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
            ),
            Expanded(
              child: SingleChildScrollView(
                controller: _scrollController,
                child: Column(children: [
                  Container(
                    color: Colors.purple,
                    height: 400,
                  ),
                  SizedBox(
                    height: 100,
                    child: Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextFormField(
                          key: _textFieldKey,
                          controller: _textController,
                          autovalidateMode: AutovalidateMode.always,
                          keyboardType: const TextInputType.numberWithOptions(decimal: true),
                          onTap: () {
                            final textLength = _textController.value.text.length;
                            _textController.selection = TextSelection(baseOffset: 0, extentOffset: textLength);
                          },
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.all(
                                Radius.circular(8),
                              ),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.green),
                              borderRadius: BorderRadius.all(
                                Radius.circular(8),
                              ),
                            ),
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.red,
                    height: 100,
                  ),
                ]),
              ),
            ),
            Container(
              color: Colors.green,
              height: 100,
            ),
          ],
        ),
      ), 
    );
  }
}

解决方案 #

1. 修复键盘遮挡问题 #

直接在onTap中修改文本选择会干扰Flutter默认的键盘滚动适配逻辑，需延迟执行全选操作，让框架先完成键盘弹出和滚动：

onTap: () {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final textLength = _textController.value.text.length;
    _textController.selection = TextSelection(baseOffset: 0, extentOffset: textLength);
  });
},

2. 修正文本重置逻辑 #

原代码在build方法中设置_textController.text会导致每次重建都重置文本，应移到initState中：

@override
void initState() {
  super.initState();
  _textController.text = "DemoText";
}

3. 强化禁止修改原有内容的限制 #

通过监听文本变化，确保用户只能替换全部内容，无法部分修改：

bool _isSelecting = false;

@override
void initState() {
  super.initState();
  _textController.text = "DemoText";
  _textController.addListener(() {
    final text = _textController.text;
    final originalLength = "DemoText".length;
    // 非全选状态下，若文本长度小于原长度且不为空，直接清空（避免部分修改）
    if (text.isNotEmpty && text.length < originalLength && !_isSelecting) {
      _textController.clear();
    }
  });
}

// 修改onTap方法添加状态标记
onTap: () {
  _isSelecting = true;
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final textLength = _textController.value.text.length;
    _textController.selection = TextSelection(baseOffset: 0, extentOffset: textLength);
    // 延迟取消标记，确保输入操作的判断准确
    Future.delayed(const Duration(milliseconds: 100), () {
      _isSelecting = false;
    });
  });
},

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