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

在表单外单击后,移除textForm field Flutter Web上的焦点

在Flutter Web上,当用户在表单外单击时,可以通过以下步骤移除textFormField的焦点:

  1. 导入flutter包:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 在StatefulWidget的build方法中,定义一个FocusNode变量:
代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _focusNode.unfocus(); // 移除焦点
      },
      child: Scaffold(
        body: Center(
          child: TextFormField(
            focusNode: _focusNode,
            decoration: InputDecoration(
              labelText: 'Text',
            ),
          ),
        ),
      ),
    );
  }
}
  1. 使用GestureDetector包裹表单的根Widget,并设置onTap回调函数。在回调函数中,调用_focusNode.unfocus()方法,即可移除焦点。

这样,在用户在表单外单击时,焦点将从textFormField移除,完成焦点移除的操作。

注意:这只是在Flutter Web上移除焦点的一种方式,实际项目中,可能还需要根据具体情况处理其他逻辑,比如校验用户输入等。另外,如果需要更多关于Flutter开发的信息,可以访问腾讯云Flutter产品介绍页面:Flutter产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 事件基础补充

JavaScript事件是由访问Web页面的用户引起一系列操作,例如:用户点击。当用户执行某些操作时候,再去执行一系列代码。...JavaScript事件处理函数及其使用列表 事件处理函数 影响元素 何时发生 onabort 图像 当图像加载被中断时 onblur 窗口、框架、所有表单对象 当焦点从对象移开时 onchange...输入框,选择框和文本区域 当改变一个元素值且失去焦点时 onclick 链接、按钮、表单对象、图像映射区域 当用户单击对象时 ondblclick 链接、按钮、表单对象 当用户双击对象时 ondragdrop...onkeyup = function () { alert('Lee'); }; 3.HTML事件 load:当页面完全加载window上面触发,或当框架集加载完毕框架集触发。...window.onload = function () { alert('Lee'); }; unload:当页面完全卸载window上面触发,或当框架集卸载框架集触发。

3.1K50

知识点 | JavaScript事件浅析

js去调用dom事件。...事件有很多,有我用过有我没用过,今天我想分析一番。 事件流 我们都知道,有两种事件流,一个是冒泡一个是捕获。 捕获就是从body开始到你触发事件节点,从到内一个过程。...scroll 滚动时候触发,无限滚动之类一些效果 resize 放大缩小窗口时候发生变化,和上面的scroll都需要注意去抖, 鼠标事件 传送门,去看鼠标事件 click 单击事件,DOM单击鼠标时候触发...mouseout和mouseover 鼠标移出和移入,使用起来会有冒泡问题,可以使用延时方法解决 mouseleave和mouseenter 鼠标移除移除,解决了冒泡问题。...控件事件 input 当内容发生改变时触发,有可能是代码触发改动兼容ie的话input propertychange change 当失去焦点时,内容改变触发 blur 失去焦点触发 focus 获得焦点触发

1.2K30

k3cloud开发实例

动态表单显示操作结果。...该事件只新增表单模型触发,用于对新增表单模型进行相关操作。此插件操作不会引起Model.DataChanged值改变。...插件BeforeSave可以保存前对单据数据进行处理。通常处理有两个:  数据校验;  计算和更新数据; BOS平台当客户端发起请求,到web服务器,领域模型框架调用运行时,加载插件运行。...通常用来处理操作相关数据处理,如生成其他单据、更新状态、运行业务运算等。该插件操作事务,执行结果不影响操作,因此该插件要考虑执行失败逻辑处理。...简单生产领料单保存前,根据当前单据删除领料单分录获取关联源单分录,保存,检测简单领料分录是否仍存在该分录ID行,然后再判断应该更新简单领料分录还是源单分录,重置该分录行领料标识。

4.1K12

Flutter》-- 4.Flutter组件基础

Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示设备屏幕显示元素,而是一个描述显示元素配置数据。...Flutter中真正代表屏幕显示元素类是Element。 大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...didChangeDependencies():状态组件依赖关系发生变化Flutter会回调该函数,随后触发组件构建操作。...dispose():当状态组件需要被永久地从视图树中移除时,调用dispose()。调用dispose(),组件会被销毁,调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...Form是一个包含表单元素表单组件,可以用来对输入信息进行校验。

12.4K30

Flutter 2.5正式版发布,带来重大更新

经过了近两个月版本迭代Flutter 官方昨天发布了Flutter 2.5版本。...例如,我们可以文本选择以及能够处理键盘事件停止它事件传播。...] iOS 不触发设备方向 #4158 [相机] 修复坐标旋转以 iOS 设置焦点和曝光点 #4197 [相机] 修复相机预览并不总是方向改变时重建 #3992 [camera] 设置不受支持...同时, Web 查看相机预览、拍照、使用闪光灯和缩放控件提供基本支持,不过目前还不是被认可插件,因此开发者需要明确添加它以才能在 Web 中使用。...除了新功能, Widget Inspector 还进行了更新和优化,更新 DevTools 调试 Flutter 应用程序也更有用。

4.3K50

Flutter 2.5正式版发布,带来多项重大更新

经过了近两个月版本迭代Flutter 官方昨天发布了Flutter 2.5版本。...例如,我们可以文本选择以及能够处理键盘事件停止它事件传播。... iOS 不触发设备方向 #4158 相机 修复坐标旋转以 iOS 设置焦点和曝光点 #4197 相机 修复相机预览并不总是方向改变时重建 #3992 camera 设置不受支持 FocusMode...同时, Web 查看相机预览、拍照、使用闪光灯和缩放控件提供基本支持,不过目前还不是被认可插件,因此开发者需要明确添加它以才能在 Web 中使用。...[在这里插入图片描述] 除了新功能, Widget Inspector 还进行了更新和优化,更新 DevTools 调试 Flutter 应用程序也更有用。

3.5K00

Flutter》-- 2.Windows系统下搭建开发环境

安装完成,运行Android Studio程序,弹出对话框中选择“Do not import settings”单选按钮,单击“OK”按钮。...修改包名单击“Finish”按钮,项目创建完成。 单击运行按钮,模拟器中可以看到运行项目。...Flutter热重载操作中,通过将更新源代码注入正在运行Dart虚拟机即可实现热重载。虚拟机使用新字段和函数更新类Flutter框架会自动重新构建应用Widget树,并刷新效果。...> 4)开启Flutter对桌面和Web支持: flutter config --enable-windows-desktop 5)升级Flutter SDK和依赖包: flutter upgrade...2.10 安装配置VS Code 除了Android Studio,VS Code也是官方推荐一款可视化Flutter开发工具。

1.6K30

Flutter 渲染性能问题分析

Web (Chromium) 惯性滚动动画性能理论要远远优于 Flutter。...) > Flutter (Android) 我们不同设备对上述业务页面惯性滚动过程中进行 trace 抓取,结合 Flutter 代码对 trace 文件进行分析,了解 Flutter 渲染流水线惯性滚动过程中各个环节调度...导致光栅化耗时非常高,低端机上只有 10 ~ 20帧,不过这个可以应用层面做一些优化来避免; 总的来说,Flutter 惯性滚动过程掉帧大部分都来自 Flutter UI 线程阻塞,新挂载列表单...那么 Native (Android) 机制其实跟 Flutter 是比较类似的,为什么它性能也会优于 Flutter 呢?...一个优化 Flutter 应用,比起一个优化 Native 应用,惯性滚动上还是会有一定性能差距。

2.6K20

Flutter 入门指北之输入处理(登录界面实战)

{ super.initState(); // 当输入框获取到焦点或者失去焦点时候回调用 _editNode.addListener(() { print('edit...该部分代码查看 text_field_main.dart 文件 那么如果有个需求,点击按钮时候需要对输入内容合理性进行检测,当然可以通过 TextEditingController 结果进行检测...导入第三方插件 其实 Flutter 中缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 和原生交互桥梁,也就是说,要写 Flutter 插件,需要写 Android 和 iOS...好在有很多现成插件已经开源,可以通过 FlutterPackage 搜索到,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用, FlutterPackage 中搜索到插件,...做好准备工作,我们就可以撸一个登录界面了~ 撸一个登录界面 开撸之前,我们先看下最终效果图吧,虽然是比较常用界面 ? ?

1.9K50

JQery事件

这是我参与「掘金日新计划 · 10 月更文挑战」第14天,点击查看活动详情 前言 今天记录一下JQery事件,其中包括五部分 鼠标事件 click: 鼠标单击时触发; dblclick:鼠标双击时触发...键盘事件 键盘事件仅作用在当前焦点DOM,通常是和。 keydown:键盘按下时触发; keyup:键盘松开时触发; keypress:按一次键触发。...其他事件 focus:当DOM获得焦点时触发; blur:当DOM失去焦点时触发; change:当、或内容改变时触发; submit:当...由于ready事件DOM完成初始化触发,且只触发一次,所以非常适合用来写其他初始化代码。...为了实现移除效果,可以使用off('click')一次性移除已绑定click事件所有处理函数。 同理,无参数调用off()一次性移除已绑定所有类型事件处理函数。

42810

按钮样式正确方式

整个Web,我们可以看到很多触发JavaScript操作按钮,仔细检查发现它们是用,或编码。 为什么元素如此不受待见?...您网站或网络应用程序用户可以使用键盘或虚拟键盘(iOS和Android)“”并激活表单域,按钮,链接和其他交互元素。 对于一些用户来说,它可以加速缓慢交互,比如填写表单。...对于其他人来说,使用鼠标或触摸指针是不可能或困难。 他们依靠使用键盘或专用设备访问网站。 我见过大多数Web项目中,设计师都指定了预期鼠标移过样式,但未指定焦点样式。 我们应该做什么?...处理focus样式 还有一个棘手问题。 多个浏览器中,当您单击链接或按钮时,将应用两个伪类: :active :focus 一旦停止按下鼠标按钮或触控板,“active”伪类就会停止应用。...我们可以使用它来从没有焦点可见类焦点元素中移除焦点样式: /* hide focus style if not from keyboard navigation */ .js-focus-visible

3.6K20

JavaScript小技能:事件

` () => `代替 `function ()`: 1.2 事件模型 JavaScript 不同环境下使用不同事件模型:不同编程环境下事件机制是不同,比如JavaScript 网页事件机制不同于在其他环境中事件机制...事件委托: 如果你想要在大量子元素中单击任何一个都可以运行一段代码,您可以将事件监听器设置在其父节点,并让子节点发生事件冒泡到父节点,而不是每个子节点单独设置事件监听器。...; }); //有一个相对应方法,removeEventListener(),这个方法移除事件监听器。...页面载入完成事件 onsubmit 表单提交事件 : 函数返回true表单提交 onsubmit=" return Function" onchange 失去焦点并且值发生改变事件...//鼠标指针移到指定元素执行Javascript代码: 鼠标指针移动到这。

1.4K10

第9章 JavaScript事件处理

带着问题去看书学习啦~ HTML5+CSS3+JavaScript Web 前端开发案例教程(慕课版)【不推荐】,微信读书中找到学习Web前端书籍,第9章开始啦,耶(^-^)V 习题 9-1 调用事件方法有几种...> 由于html代码是按照顺序执行,所以像input表单定义这里,一定要放在js代码前面,这样才能操作到对象,否则会报空。...注意:目前除IE,其他主流浏览器如Firefox、Opera、Safari都支持标准DOM事件处理模型。IE仍然使用自己模型,即冒泡型。 9-4 常用鼠标事件有哪些?...', observer); // 移除事件监听器 DOM标准: // 第一个参数是事件名称,第二个参数 observer 是回调处理函数,第三个参数注明该回调处理函数是事件传递过程中捕获阶段被调用还是冒泡阶段被调用...element.removeEventListener('click', observer, useCapture); // 移除事件监听器 直接在DOM节点加事件 IE:通过设置event对象

1K20

Python 自动化指南(繁琐工作自动化)第二版:二十、使用 GUI 自动化控制键盘和鼠标

这些按键作用取决于哪个窗口是活动,哪个文本字段具有焦点。您可能希望首先向所需文本字段发送鼠标单击,以确保它获得焦点。...表单中移动,每个字段中键入信息。 单击提交按钮。 对下一组数据重复这个过程。 这意味着您代码需要执行以下操作: 调用pyautogui.click()点击表单和提交按钮。...这将使您不必为每个字段计算要单击 x 和 y 坐标。 以下是表单中输入数据步骤: 将键盘焦点放在name字段,这样按键就可以该字段中键入文本。 键入一个名称,然后按下Enter。...提交表单,浏览器会将您带到一个页面,您需要通过该页面上链接返回到表单页面。...一旦提交按钮成为焦点,调用pyautogui.press('enter')将模拟按下ENTER键并提交表单。提交表单,您程序将等待五秒钟来加载下一页。

8.4K51

Spring认证指南:了解如何使用 Spring 执行表单验证

原标题:Spring认证中国教育管理中心-了解如何使用 Spring 执行表单验证(Spring中国教育管理中心) 本指南将引导您完成配置 Web 应用程序表单以支持验证过程。...完成,您可以对照中代码检查结果 gs-validating-form-input/complete。...单击Dependencies并选择Spring Web、Thymeleaf和Validation。 单击生成。 下载生成 ZIP 文件,该文件是根据您选择配置 Web 应用程序存档。...创建 Web 控制器 现在您已经定义了表单支持对象,是时候创建一个简单 Web 控制器了。...您可以从绑定到PersonForm对象表单中检索所有属性。代码中,您测试错误。如果遇到错误,可以将用户发送回原始form模板。在这种情况下,将显示所有错误属性。

1.1K30

JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

JavaScript 中,鼠标事件是 Web 开发中最常用事件类型,本篇算是笔记吧。...常见鼠标事件有click:单击鼠标左键时发生。...当用户焦点在按钮并按了 Enter 键时,同样会触发这个事dblclick:双击鼠标左键时发生,如果右键也按下则不会发生contextmenu :弹出右键菜单。...focus:获取焦点blur:失去焦点mouse事件click、dblclick 没有什么好讲,contextmenu用也不多讲。重点讲下mouse事件。...对应移除事件是mouseoutmouseenter(鼠标进入):当鼠标移入元素本身(不包含元素子元素)会触发事件,也就是不会冒泡,对应移除事件是mouseleavemouseenter/mouseover

3.4K21

Spring认证指南:了解如何使用 Spring 创建和提交 Web 表单

原标题:Spring认证指南|了解如何使用 Spring 创建和提交 Web 表单。 本指南将引导您完成使用 Spring 创建和提交 Web 表单过程。...你将建造什么 本指南中,您将构建一个 Web 表单,可通过以下 URL 访问该表单: http://localhost:8080/greeting 浏览器中查看此页面将显示表单。...完成,您可以对照中代码检查结果 gs-handling-form-submission/complete。...单击Dependencies并选择Spring Web和Thymeleaf。 单击生成。 下载生成 ZIP 文件,该文件是根据您选择配置 Web 应用程序存档。...用和表示两个表单字段对应于对象中字段。th:field="{id}"th:field="{content}"Greeting 这涵盖了用于呈现表单控制器、模型和视图。

1.7K20

Chrome 102:新增两个 HTML 属性、两个 JS API !

主要是下面两种用例: 元素是 DOM 树一部分,但在屏幕或隐藏; 元素是 DOM 树一部分,但应该是非交互。 这个属性切图时候还是挺有用。...例如,我们想开发一个模态框,你希望模态框可见时将焦点聚焦模态框内。或者,对于用户并不总是可见抽屉,添加 inert 可确保当抽屉不在屏幕时,键盘用户不会意外与其进行交互。... 上声明了 inert 属性,因此其中包含所有内容,包括 ,都无法获得焦点或被单击。...Navigation API 很多 Web 开发场景下,我们需要在没有网页中导航情况下去更新页面的 URL,特别是 SPA 应用里面,我们切换了导航之后,不希望刷新网页,只更新页面中内容。...File Handling API File Handling API 可以让已安装 PWA 向操作系统注册文件处理程序。注册,用户就可以单击文件然后使用已安装 PWA 打开它了。

1.8K30
领券