Flutter 中点击输入框之外的区域,进行失焦,收起键盘

首先引用 FocusNode()

复制代码
FocusNode focusNode = FocusNode();

然后在输入框组件中调用即可

Dart 复制代码
TextField(
                        controller: _textController,
                        textAlign: TextAlign.start,
                        focusNode: focusNode,
                        onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },
                        decoration: InputDecoration(
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 0),
                          hintText: hitText,
                          hintStyle: const TextStyle(color: Colors.grey),
                         
                          focusedBorder: const UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.horizontal(),
                          ),
                        ),
                        cursorColor: Colors.white,
                        style: greyTextStyle,
                        onChanged: (value) {
                          setState(() {
                            titleValue = value;
                          });
                        },
                        autofocus: false,
                      ),

下方的代码就是起到点击输入框之外的区域,进行失焦,收起键盘的作用

Dart 复制代码
onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },
相关推荐
涔溪9 分钟前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾9 分钟前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的10 分钟前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句13 分钟前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
RaidenLiu13 分钟前
RepaintBoundary是什么?怎么用?
flutter
jqq66614 分钟前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞24 分钟前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀25 分钟前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko26 分钟前
HTML 常用标签速查表
前端·html
gis收藏家1 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端