TextField suffixIcon点击时TextField 选中弹出键盘＜Flutter Bug篇＞

星宇大前端

发布于 2020-09-07 15:48:44

2.4K0

发布于 2020-09-07 15:48:44

文章被收录于专栏：大宇笔记大宇笔记

项目场景：

登录页面有输入密码，常规隐藏显示。但是点击后面小眼睛的时候，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))),
                  ),
                ),

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https