Flutter 点击空白的地方让软键盘消失

在Flutter中,你可以通过在Scaffold的body上添加一个GestureDetector来实现点击空白处隐藏键盘的操作。下面是一个示例代码:

Dart 复制代码
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(context);
            if (!currentFocus.hasPrimaryFocus &&
                currentFocus.focusedChild != null) {
              FocusManager.instance.primaryFocus?.unfocus();
            }
          },
          child: YourWidget(), // 替换为你的具体内容
        ),
      ),
    );
  }
}

在这个示例中,我们在Scaffold的body上添加了一个GestureDetector,并设置了onTap回调函数。当用户点击空白处时,会触发onTap回调函数,然后我们通过FocusScopeNode来判断当前焦点是否在输入框上,如果是,则调用FocusManager.instance.primaryFocus.unfocus()来隐藏键盘。

注意:你需要将YourWidget替换为你实际使用的Widget。

相关推荐
全栈前端老曹几秒前
【前端路由】Vue Router 嵌套路由 - 配置父子级路由、命名视图、动态路径匹配
前端·javascript·vue.js·node.js·ecmascript·vue-router·前端路由
EndingCoder8 分钟前
安装和设置 TypeScript 开发环境
前端·javascript·typescript
张雨zy43 分钟前
Vue 项目管理数据时,Cookie、Pinia 和 LocalStorage 三种常见的工具的选择
前端·javascript·vue.js
五月君_1 小时前
Nuxt UI v4.3 发布:原生 AI 富文本编辑器来了,Vue 生态又添一员猛将!
前端·javascript·vue.js·人工智能·ui
!执行1 小时前
遇到 Git 提示大文件无法上传确实让人头疼
前端·github
坚持学习前端日记1 小时前
个人网站从零到盈利的成长策略
前端·程序人生
CamilleZJ2 小时前
eslint+prettier
前端·eslint·工程化·prettier
web小白成长日记2 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
2501_946675642 小时前
Flutter与OpenHarmony打卡步进器组件
java·javascript·flutter
tjswk20082 小时前
在ios上动态插入元素的列表使用:last-child样式可能不能及时生效
前端