使用GetX时侧滑返回带TextField的页面后键盘不弹出问题

问题描述 #

开发使用GetX进行状态管理的Flutter应用时，遇到如下问题：从包含TextField的页面导航至其他页面后，通过侧滑返回手势回到原页面，点击TextField时键盘无法弹出。使用返回按钮则键盘功能正常。

复现步骤 #

• 打开含TextField的页面（如聊天页）；
• 点击TextField确保键盘弹出；
• 点击元素（如头像）导航至其他页面（如个人主页）；
• 使用侧滑返回手势回到原页面；
• 再次点击TextField。

预期与实际行为 #

• 预期行为：返回页面后点击TextField，键盘应正常弹出。
• 实际行为：侧滑返回后点击TextField，键盘无响应。

代码示例 #

main.dart #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'chat_screen.dart';
import 'profile_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      home: ChatScreen(),
    );
  }
}

chat_screen.dart #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'profile_screen.dart';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> with WidgetsBindingObserver {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _focusNode.requestFocus();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat"),
        actions: [
          IconButton(
            icon: Icon(Icons.account_circle),
            onPressed: () {
              Get.to(() => ProfileScreen());
            },
          ),
        ],
      ),
      body: Center(
        child: TextField(
          controller: _controller,
          focusNode: _focusNode,
          decoration: InputDecoration(
            hintText: "Type a message",
          ),
        ),
      ),
    );
  }
}

已尝试无效方案 #

• 使用WidgetsBindingObserver监听应用生命周期事件并重设FocusNode焦点；
• 在didChangeDependencies中重设FocusNode焦点；
• 在多个生命周期方法中手动调用FocusScope.of(context).requestFocus(_focusNode)。

解决方案 #

方案1：利用GetX路由返回回调处理焦点 #

在导航到其他页面时，通过then回调监听页面返回事件，重置焦点状态：

// 修改ChatScreen中IconButton的onPressed方法
IconButton(
  icon: Icon(Icons.account_circle),
  onPressed: () {
    Get.to(() => ProfileScreen()).then((_) {
      // 页面返回后先取消焦点，再允许重新获取
      _focusNode.unfocus();
      // 若需要自动弹出键盘，可添加以下代码
      // Future.delayed(const Duration(milliseconds: 100), () {
      //   FocusScope.of(context).requestFocus(_focusNode);
      // });
    });
  },
),

方案2：监听GetX路由全局变化 #

在ChatScreen的initState中添加全局路由监听，当当前页面重新成为活跃页面时，修复焦点状态：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(this);
  
  // 监听GetX路由变化
  ever(Get.routing, (route) {
    if (route.current == Get.currentRoute && !_focusNode.hasFocus) {
      // 延迟执行确保页面状态稳定
      Future.delayed(const Duration(milliseconds: 100), () {
        // 重置焦点状态，让TextField可重新获取焦点
        _focusNode.unfocus();
      });
    }
  });
}

方案3：在TextField的onTap中强制请求焦点 #

直接在TextField的点击事件中手动处理焦点请求，确保点击时能正确唤起键盘：

TextField(
  controller: _controller,
  focusNode: _focusNode,
  onTap: () {
    if (!_focusNode.hasFocus) {
      // 强制请求焦点
      FocusScope.of(context).requestFocus(_focusNode);
    }
  },
  decoration: InputDecoration(
    hintText: "Type a message",
  ),
)

这些方案的核心是修复侧滑返回后FocusNode的异常状态，确保TextField能正常响应焦点请求。

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