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))),
                  ),
                ),