Flutter疑难杂症:安卓手机键盘焦点丢失问题解决办法

一、问题来源

Flutter开发过程中安卓系统遇到当普通键盘输入用户账号之后,在密码框输入密文时会出现普通键盘先消失,安全键盘再弹出的过程,两种键盘切换的过程会失去焦点,简称键盘失焦。

二、解决办法

就是用 Listener 监听动作,普通键盘和安全键盘切换之后再次请求焦点即可,代码如下:

dart 复制代码
/// 账号焦点
final focusNodeAccount = FocusNode();

/// 密码焦点
final focusNodePwd = FocusNode();
dart 复制代码
...
Listener(
  onPointerDown: (event) async {
    await Future.delayed(const Duration(milliseconds: 350));
    focusNodeAccount.requestFocus();
    SystemChannels.textInput.invokeMethod('TextInput.show');//兼容小米手机

  },
  child: TextField(
    focusNode: focusNodeAccount,
    decoration: InputDecoration(
      border: buildBorder(),
      focusedBorder: buildBorder(),
      hintText: "账号",
      hintStyle: TextStyle(fontSize: 15, color: Color(0xffB3B3B3)),
      fillColor: Colors.white,
      filled: true,
    ),
  ),
),
const SizedBox(height: 8),
Listener(
  onPointerDown: (event) async {
    await Future.delayed(const Duration(milliseconds: 350));
    focusNodePwd.requestFocus();
    SystemChannels.textInput.invokeMethod('TextInput.show');//兼容小米手机
  },
  child: TextField(
    focusNode: focusNodePwd,
    decoration: InputDecoration(
      border: buildBorder(),
      focusedBorder: buildBorder(),
      hintText: "密码",
      hintStyle: TextStyle(fontSize: 15, color: Color(0xffB3B3B3)),
      fillColor: Colors.white,
      filled: true,
    ),
    obscureText: true,
  ),
),

三、总结

1、思路是通过在键盘切换通过 FocusNode 请求再次获取焦点;

2、为什么要执行这行代码?

dart 复制代码
await Future.delayed(const Duration(milliseconds: 350));

是为了等安全键盘完全弹出(动画结束之后)再获取焦点。如果没有此行代码,部分华为机型会先获取到焦点然后二次丢失(测试同学在此阻击过本人,真机直面)。

github

相关推荐
ObjectX前端实验室40 分钟前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者42 分钟前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱1 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO1 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
开水好喝2 小时前
Code Coverage Part I
前端
DoraBigHead2 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
敢敢J的憨憨L2 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端3 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
美酒没故事°3 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278003 小时前
vue3组件间的通讯方式
前端·vue.js