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

如何在Flutter中清除Textfield并将焦点返回到同一个Textfield控制器自己的OnChange事件?

在Flutter中,要清除TextField并将焦点返回到同一个TextField控制器自己的OnChange事件,可以按照以下步骤进行操作:

  1. 首先,创建一个TextField控件,并为其指定一个TextEditingController控制器,例如:
代码语言:txt
复制
TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  onChanged: (value) {
    // 在这里处理文本变化事件
  },
),
  1. 在TextField的onChanged事件处理程序中,可以通过调用TextEditingController的clear()方法来清除文本内容,然后使用FocusScope.of(context).requestFocus()方法将焦点返回到TextField自身,例如:
代码语言:txt
复制
onChanged: (value) {
  _controller.clear();
  FocusScope.of(context).requestFocus(FocusNode());
  // 在这里处理文本变化事件
},
  1. 这样,每当文本发生变化时,TextField的内容将被清除,并且焦点将返回到TextField自身,以便用户可以继续输入。

需要注意的是,以上代码只是演示了如何在Flutter中清除TextField并将焦点返回到同一个TextField控制器自己的OnChange事件。在实际开发中,您可能还需要处理其他逻辑,例如校验输入内容、保存输入值等。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)提供了丰富的移动开发解决方案,包括移动应用开发、移动应用测试、移动应用分发等,可帮助开发者快速构建高质量的移动应用。

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

相关·内容

Flutter | 常用组件

而在 iconfont ,只是将位码对应字形做成了图标,所以不同字符最终就会渲染成不同图标 在 Flutter ,iconfont 和图片相比有如下优势 1,体积小 2,矢量图标,放大不会影响清晰度...大多数情况下我们都需要显示提供一个 controller 来与文本框交互,如果没有提供,则 TextField 会自动创建一个 focusNode :用于控制 TextField 是否占有当前键盘输入焦点...简单焦点状态改变事件 // 创建 focusNode FocusNode focusNode = new FocusNode(); ... // focusNode绑定输入框 TextField...,//TODO 这里设置不生效,日后解决 表单 Form 在实际开发,在请求接口之前会对输入框数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个...结果为 false,则当前路由不会返回,若为 true,则会返回到上一个路由,此属性通常用于拦截按钮 onChange:Form 任意一个字 FormField 内容变化时都会触发此回调 FormField

11.4K30

Flutter 快速解析 TextField 内部原理

FlutterTextField 是一个比较复杂控件,而在整个 TextField 里嵌套了许多不同实现控件,它们组成了我们常用输入框效果,如下图所示是关于 TextField 主要构成部分...TextField 还能继续保持之前获得焦点。...另外说到 Navigator就不得不说每个页面也都有自己 FocusScope, 也就是我们常用 FocusScope.of(context) 等用于键盘和焦点处理。...例如应用因为低内存在后台被回收时,可以通过它在重新回到 App 时恢复指定数据,举个例子: import 'package:flutter/material.dart'; void main() =...最后介绍一个简单问题,之前有人刚好问我:如何在 Flutter 上实现类似微信聊天输入框从一行到多行输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.4K30
  • Flutter lesson 8:输入框,时间日期选择

    选择时间日期还是挺简单,不过需要注意flutter: 选择日期是:2019-07-30 00:00:00.000 flutter: 选择时间是:TimeOfDay(21:34) 两个方法选择时间...输入框 TextField TextFieldFlutter用户输入框,属性挺多,不同配置出不同效果,就像是HTML input 一样。...const TextField({ Key key, this.controller, //编辑框控制器,跟文本框交互一般都通过该属性完成,如果不创建的话默认会自动创建 this.focusNode...使用 onChange 方法 同样是上面的代码,我把它提取出来 TextField( onChanged: (text){ setState(() { _controllerValue...,常用属性也就是上面涉及到属性 关于 TextField 其他属性,可以自己尝试一下,比如自动聚焦,光标设置等等,在最上面的属性列表中都有注释,可以自行研究。

    4.7K20

    flutter 输入框组件TextField实现代码

    TextField 顾名思义文本输入框,类似于iOSUITextField和AndroidEditText和WebTextInput。主要是为用户提供输入文本提供方便。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField用法。...以下内容已更新到 github TextField构造方法: const TextField({ Key key, this.controller, //控制器,控制TextField...关于TextField其他用法就不在一一介绍了,有兴趣小伙伴可以自己尝试下. 使用decoration美化输入框 先看一下效果: ?...当按下一个未完成操作(“next”或“previous”)时,用户内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]另一个输入小部件。

    4.8K11

    Flutter实战】文本组件及五大案例

    老孟导读:大家好,这是【Flutter实战】系列文章第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握...基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本样式在style设置,类型为TextStyle,TextStyle包含很多文本样式属性...,值说明如下: left:左对齐 right:右对齐 center:居中 justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以在官方issue关注此问题 start...设置全局字体样式: 在MaterialApptheme设置如下 MaterialApp( title: 'Flutter Demo', theme: ThemeData( ......如果需要2个TextField内容进行同步,只需要给2个TextField设置同一个controller即可实现。 keyboardType参数控制软键盘类型,说明如下: text:通用键盘。

    7.3K10

    SwiftUI TextField 进阶 —— 事件焦点、键盘

    SwiftUI TextField 进阶 —— 事件焦点、键盘 想获得更好阅读体验,可以访问我博客 www.fatbobman.com[1] 本文将探讨涉及 SwiftUI TextField 事件...事件 onEditingChanged 当 TextField 获得焦点时(进入可编辑状态),onEditingChanged将调用给定方法并传递true值;当 TextField 失去焦点时,再次调用方法并传递...即使在onAppear,也必须要有一定延时才能让 TextField 焦点。...在多个 TextFiled 之间切换焦点 通过使用 focused 和 onSubmit 结合,我们可以实现当用户在一个 TextField 输入完成后(点击return),自动让焦点切换到下一个...创建自己 onEditingChanged 判断单个 TextField 焦点状态最佳选择仍是使用onEditingChanged,但对于某些无法使用 onEditingChanged 场合(比如新

    13.3K10

    输入和选择

    在前面的文章我们学习了Flutter事件处理,包括组件单击、双击、长按、滑动等。想必大家多其已经有了一定认识。 那么,这节我们主要介绍下Flutter输入和选择组件用法。...TextField 顾名思义文本输入框,类似于IosUITextField和AndroidEditText。主要是为用户提供输入文本提供方便。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField用法。...可以看到每次我们让TextField获得焦点时候弹出键盘就变成了数字优先了。 当然,我们也可以为输入框做一些其他效果,提示文字,icon、标签文字等。...关于TextField其他用法就不在一一介绍了,有兴趣小伙伴可以自己尝试下。

    2.4K20

    Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础 Flutter Widget,原因在于很多基础组件有很多容易忽视注意事项,了解并熟悉后对整体开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...是有状态 StatefulWidget,有丰富属性,自定义化较高,实践需要合理利用各种回调; 案例尝试 和尚尝试最基本 TextField,区分默认状态和获取焦点状态; return TextField...WhitelistingTextInputFormatter 仅允许输入白名单字符; digitsOnly 仅支持数字 [0-9]; c....; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 设置本地化代理和支持语言类型...文本框是日常开发必不可少组件,和尚还在探索过程,如有问题请多多指导! 来源: 阿策小和尚

    4.7K51

    Flutter组件学习(三)—— 输入框TextFiled

    序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架魅力还是很吸引人哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍...FlutterText组件 和 FlutterImage组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件API 先来看一下TextFiled...,接下来我们一个一个来看这些属性: 1、controller 根据字面意思我们就可以知道,这是一个控制器,毫无疑问当然是控制 TextField 组件了,用处有很多,可以监听输入框输入(通过controller.addListener...'); 12 } else { 13 print('失去焦点'); 14 } 15} 16 17new TextField( 18 focusNode: _focusNode, 19) 3、...6、textInputAction 这个属性用来控制弹出键盘右下角按钮,这是一个枚举值,有很多种形式(下面举几个例子): TextInputAction.done:完成按钮 TextInputAction.go

    2.6K50

    SwiftUI Release 引入辅助焦点管理

    这个新功能使得在SwiftUI处理辅助技术( VoiceOver 和 Switch Control)焦点状态变得更加轻松。...本文将介绍如何使用 @FocusState 属性包装器来在SwiftUI管理和移动辅助焦点。...这种方法是使用 @FocusState 属性包装器,并为其提供一个用于标识焦点类型参数(在此例是 .switchControl)。...总结在这篇文章,我们深入探讨了 SwiftUI Release 引入辅助焦点管理功能,使得处理辅助技术( VoiceOver 和 Switch Control)焦点状态变得更加轻松。...通过详细示例代码,我们演示了如何在 SwiftUI 中使用 @FocusState,以及如何通过 focused 视图修饰符将焦点状态绑定到特定视图。

    11510

    JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

    当组件获得或失去键盘焦点时,将调用侦听器对象相关方法,并将FocusEvent传递给它。 API focusGained ? focusLost ? 2 FocusAdapter ?...用于接收键盘焦点事件抽象适配器类。 此类方法为空。 此类存在目的是方便创建监听器对象。 继承此类来创建 FocusEvent 监听器,并针对感兴趣事件重写方法。...当组件获得或失去键盘焦点时,可调用侦听器对象相关方法,并将 FocusEvent 传递给它。 API focusGained ? focusLost ?...要获取许多组件焦点状态,请考虑在KeyboardFocusManager类上实现PropertyChangeListener实例,如何使用焦点子系统焦点更改跟踪到多个组件中所述。...下面的示例演示焦点事件。该窗口显示各种组件。注册在每个组件上焦点侦听器报告每个焦点获得和焦点丢失事件。对于每个事件,将报告焦点更改涉及其他组件,即相反组件。

    4.7K10

    SwiftUI TextField进阶——格式与校验

    本文为【SwiftUI 进阶】系列文章一篇,在本文中,我将介绍如何在TextField实现如下功能: •屏蔽无效字符•判断录入内容是否满足特定条件•对录入文本实时格式化显示 textfieldDemo1...如何在TextField实现格式化显示 现有格式化方法 在SwiftUI 3.0TextField新增了使用新老两种Formatter构造方法。...如何在TextField屏蔽无效字符 现有屏蔽字符方法 在SwiftUI,可以通过设置仅使用特定键盘类型来实现一定程度上录入限制。...如何在TextField检查内容是否符合指定条件 相较上述两个目标,在SwiftUI检查TextField内容是否符合指定条件是相当方便。...,方案二,所有的逻辑都是在onChange激发调用

    8.2K20

    Flutter跨平台移动端开发丨Text、Button、Image、Switch、Checkbox、TextField

    )) ), ], ), ), ); } } ---- Button Widget(按钮) Material 库按钮点击时默认带有...“水波动画”,点击事件监听通过 onPressed 属性设置,若不设置 onPressed 则按钮处于禁用状态,无点击动效也不响应点击事件 const MaterialButton({ Key...NetworkImage:从网络记载图片 ImageProvider AssetImage(加载本地图片) 工程根目录下创建文件夹 images 存放图片文件 在 pubspec.yaml 文件...flutter 部分添加图片注册信息 flutter: # The following line ensures that the Material Icons font is # included...TextInputType.text : TextInputType.multiline), super(key: key); 输入框控制器 TextEditingController 输入框事件监听

    2.5K40

    Flutter》-- 4.Flutter组件基础

    FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上显示元素,而是一个描述显示元素配置数据。...Flutter真正代表屏幕显示元素类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...如果没有提供controller,则TextField组件内部会自动创建一个。 focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互一种常见方式。...decoration:用于控制TextField组件外观显示,提示文本、背景颜色和边框。 textAlign:输入框内文本在水平方向对齐方式。 textDirection:输入框内文本方向。...keyboardAppearance:设置键盘亮度模式,只能在iOS上使用。 onTap:TextField组件点击事件

    12.5K30

    Flutter常见表单组件

    Flutter,常见表单组件有TextField单行文本框、TextField多行文本框、CheckBox、Radio、Switch、CheckBoxListTile、RadioListTile、...TextField TextField有如下常见属性: maxLines,设置此参数可以将文本框改为多行文本框 onChanged,文本框改变时候触发事件 decoration——hintText...那么如何获取TextField输入内容呢? 其实很简单,我们接着上面的代码,只需要通过 _usernameController.text 就可以获取到对应输入框文字了。...我们可以通过配置 TextField onChanged 回调来监听输入框中文字实时变化: import 'package:flutter/material.dart'; class HomePage...Checkbox作为一个选中组件,仅仅提供了选中与否最基本视觉展示,如果想要扩展其他内容,则需要自己去组装。

    4.9K20

    FlutterTextField 安全泄漏问题深入探索文本输入流程

    Flutter TextField 相信大家都很熟悉,作为输入控件 TextField 经常出现在需要登录场景,例如在需要输入密码 TextField 上配置 obscureText:...一、CWE-316 事实上如果你使用 TextField 作用密码输入框,这时候你很可能会在安全合规遇到类似 CWE-316 警告,主要原因在于:Flutter 在进行文本输入时,和原生平台通信过程...之后我们通过 TextField controller 清空输入文本,销毁当前页面,跳转到空白页面下后,同时在 Flutter devTool 上主动点击 GC 清理数据,最后再回到终端执行 find...那回到上面的 CWE-316 问题,可以看到此时内存留残留明文密码正是 TextInputClient.updateEditingState ,也就是原生平台传给 Dart 层 Map 数据,...,直到整个区域被清空并交还给操作系统,或在该地址分配了一个新对象,这时候才可能会被完全清除

    1.6K30

    iOS学习——tableview带编辑功能cell键盘弹出遮挡和收起问题解决

    言归正传,下面就说回到我们要解决问题,在UITableViewcell,系统自带UITableViewCell格式没有自带UITextField或UITextView这种可以编辑区域,而这种类型...,在这个过程我们需要回传什么信息,才能保证我们可以对我们控制器tableview进行控制。...当然,我们自定义cellUITextField或UITextView代理设为cell自己,具体实现如下: #import typedef void(^ContentEditResultBlock...(frame); } }   主控制器对自定义cell应用,首先,我们再主控制器定义几个属性来保存我们键盘弹出时tableviewcontentOffset以及当前编辑cellframe...,回到键盘弹出之前状态了。

    3.9K80

    我们应该如何优雅处理 React 受控与非受控

    受控 在 HTML ,表单元素(、  和 )通常自己维护 state,并根据用户输入进行更新。...没关系,接下来我们会先抛开这个 Hook ,先自己来一步一步尝试如何来实现这样组合受控 & 非受控业务 Hook。 实现 接下来我们就先按照自己思路来实现这个 Hook 。...我们利用 defaultValue 作为 input 框非受控值传递,以及配合 onChange 仅做事件传递。...我们提到过,在 React 如果需要受控状态表单控件是需要显式传入 value 和对应 onChange 作为配合,此时很容易我们想到这样改造我们组件: interface TextField...value={state} onChange={onChange} /> ); } 即使我们如何在页面的 input 中进行输入,此时传入 onChange 的确会被触发同时通知 state

    6.5K10
    领券