首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 实战】全局点击空白处隐藏键盘

老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘。...对于单个页面来说,通过为 TextField 添加 focusNode,点击空白处时使 TextField 失去焦点,实现如下: class DismissKeyboardDemo extends StatelessWidget...focusNode, ), ), ), ); } } 当 App 中有多个页面多个 TextField 时,此方式会增加大量重复的代码,因此全局添加点击空白处的监听...child: child, ), ), home: DismissKeyboardDemo(), ); } } 也可以使用如下方式隐藏键盘...appBar: AppBar(), body: Center( child: TextField(), ), ); } } 效果和上面是一样的,同样可以实现点击空白处隐藏键盘

4.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    el-dialog设置点击空白处不自动关闭

    el-dialog设置点击空白处不自动关闭 要阻止 在点击空白处时自动关闭,可以使用 :close-on-click-modal="false" 属性。...this.dialogVisible = false; } } }; 在上述示例中,我们通过将 :close-on-click-modal="false" 应用于 组件来禁止点击空白处时自动关闭对话框...这样,无论用户点击对话框外的区域,对话框都不会关闭。 你可以根据你的实际情况修改示例代码中的其他部分。...dialogVisible 数据属性用于控制对话框的显示与隐藏,showDialog 方法用于打开对话框,closeDialog 方法用于关闭对话框。...请注意,除了点击空白处关闭对话框,用户还可以通过点击右上角的关闭按钮或按下 Esc 键来关闭对话框。如果你想禁止这些方式关闭对话框,可以进一步调整相关的属性和事件处理。

    3.5K30

    jQuery动画】显示与隐藏效果

    ‍ 哈喽大家好,本次是jQuery案例练习系列第三期 ⭐本期是jQuery动画——显示与隐藏效果 系列专栏:前端案例练习 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,...---- 文章目录 前言 控制显示与隐藏的方法 实现效果 HTML、CSS部分 jQuery部分 总结 ---- 前言 在网页开发中,适当地使用动画可以使页面更加美观,进而增强用户体验。...实现效果 当点击“显示”,则div中的内容会显示,并弹出提示框,点击隐藏”则隐藏内容,弹出提示框,点击“切换”,则会在二者之间切换。... 切换 jQuery部分 思路: 1、引入jQuery,如图 2、添加ready...函数,ready是jQuery的文档就绪函数,它用于防止文档在完全加载之前允许jQuery代码,如果在文档没有完全加载之前就运行函数,操作可能失败; 3、给三个按钮添加点击事件,这里用到筛选选择器eq

    6.7K10

    点击遮罩的背景关闭遮罩(HTML)

    在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩是随便点击遮罩的背景也能关闭掉遮罩,但唯独点击内容区域不会关闭掉遮罩。...因为这个练习就是要写出和华为关一样的效果或则比它更好的效果),一开始我是这样子写的(图1) 图1 class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩...我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩,后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩。我问他你是这么写的,他告诉我:“把他们分离就可以的了。”我思考了一会,脑补:分离?...分离写(图2) 图2 把背景和内容区分开来写,不要在背景中包裹内容,这样子点击内容区就不会关闭掉遮罩了!

    3K30
    领券