TextField suffixIcon点击时TextField 选中弹出键盘<Flutter Bug篇>
时间:2022-07-24
本文章向大家介绍TextField suffixIcon点击时TextField 选中弹出键盘<Flutter Bug篇>,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目场景:
登录页面有输入密码,常规隐藏显示。但是点击后面小眼睛的时候,TextField会被选中,弹出键盘。
问题描述:
点击prefix 或者 suffix 的时候,键盘弹出,输入框选中。
原因分析:
没有阻止点击事件冒泡,这个事情应该是谷歌Flutter 去解决,也看了一些issue 很多提到了这些问题。
https://github.com/flutter/flutter/issues/36324 https://github.com/flutter/flutter/issues/36948
目前官方还是没有去处理这个事情,只能想到其他方式去解决,issue 上又解决思路,点击的时候,手动写代码让TextField 取消响应。
解决方案:
TextField(
obscureText: showPassword,
style: TextStyle(
color: Colors.white,
),
focusNode: textFieldFocusNode,
cursorColor: Colors.white,
decoration: InputDecoration(
fillColor: MyColors.color95BCFF,
filled: true,
contentPadding: const EdgeInsets.symmetric(vertical: 0),
prefixIcon: ImageIcon(
AssetImage(A.assets_images_Lp_pwd),
size: 48.sp,
color: Colors.white,
),
suffixIcon: GestureDetector(
onTap: () {
// Unfocus all focus nodes
textFieldFocusNode.unfocus();
// Disable text field's focus node request
textFieldFocusNode.canRequestFocus = false;
showPassword = !showPassword
//Enable the text field's focus node request after some delay
Future.delayed(Duration(milliseconds: 100), () {
textFieldFocusNode.canRequestFocus = true;
});
},
child: ImageIcon(
AssetImage(A.assets_images_eye_hide),
size: 48.sp,
color: Colors.white,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00FF0000)),
borderRadius: BorderRadius.all(Radius.circular(8))),
hintText: '请输入密码',
hintStyle: PlulicTextStyle.font_CEDFFF_28_hint_style,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00000000)),
borderRadius: BorderRadius.all(Radius.circular(8))),
),
),
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入探究JVM之垃圾回收算法实现细节
- 深入探究JVM之类加载与双亲委派机制
- 深入探究JVM之方法调用及Lambda表达式实现原理
- synchronized的实现原理——对象头解密
- Golang 汇编入门知识总结
- C语言小笔记(1)
- 这一次搞懂Spring的XML解析原理
- 这一次搞懂Spring自定义标签以及注解解析原理
- 这一次搞懂Spring的Bean实例化原理
- 单片机入门学习十三 STM32单片机学习十 通用定时器
- Spring IOC原理补充(循环依赖、Bean作用域等)
- 这一次搞懂Spring代理创建及AOP链式调用过程
- 这一次搞懂Spring事务注解的解析
- 这一次搞懂Spring事务是如何传播的
- 这一次搞懂SpringMVC原理