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。

相关推荐
人工智能训练2 小时前
【极速部署】Ubuntu24.04+CUDA13.0 玩转 VLLM 0.15.0:预编译 Wheel 包 GPU 版安装全攻略
运维·前端·人工智能·python·ai编程·cuda·vllm
会跑的葫芦怪3 小时前
若依Vue 项目多子路径配置
前端·javascript·vue.js
灰灰勇闯IT5 小时前
Flutter for OpenHarmony:自定义 Paint 绘图 —— 释放 Canvas 的创造力
flutter
pas1366 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠6 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
2601_949833396 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
珑墨6 小时前
【Turbo】使用介绍
前端
军军君017 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
牛马1118 小时前
Flutter OverlayEntry
flutter
打小就很皮...8 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr