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

flutter:为什么当textField失去焦点时,输入内容就会消失?

在Flutter中,当textField失去焦点时,输入内容消失的原因通常是因为没有正确处理textField的状态管理。

在Flutter中,textField是一个可编辑的文本输入框,它有两个重要的属性:controller和focusNode。controller用于控制输入框的内容,而focusNode用于管理输入框的焦点状态。

当textField失去焦点时,如果没有正确处理focusNode的状态,就会导致输入内容消失。这是因为失去焦点时,textField的内容会被清空,而没有正确处理focusNode的状态会导致textField重新构建,从而导致内容丢失。

为了解决这个问题,可以通过以下步骤进行处理:

  1. 创建一个TextEditingController对象,并将其赋值给textField的controller属性。这样可以在失去焦点时保存输入的内容。
代码语言:txt
复制
TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  // 其他属性
)
  1. 创建一个FocusNode对象,并将其赋值给textField的focusNode属性。这样可以监听焦点状态的变化。
代码语言:txt
复制
FocusNode _focusNode = FocusNode();
TextField(
  focusNode: _focusNode,
  // 其他属性
)
  1. 在失去焦点时,将输入内容保存到controller中。
代码语言:txt
复制
_focusNode.addListener(() {
  if (!_focusNode.hasFocus) {
    _controller.text = _controller.text;
  }
});

通过以上步骤,当textField失去焦点时,输入内容将会被保存到controller中,从而避免了内容消失的问题。

关于Flutter的更多信息和相关产品,你可以参考腾讯云的Flutter开发文档和相关产品:

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

相关·内容

Flutter 完美的验证码输入

先上图,不上图你们都不想看,我难啊,到Github:https://github.com/781238222/flutter-do 上给个小星星可还行,如果能fork一下,那更是感激不尽。...第四阶段:经过上面失败的经历,最后我才用如下方案:一个TextField用于输入,而验证码的显示使用Container,验证码覆盖在TextField之上,用户无法感知到TextField,这是目前为止我发现的最完美的方案...焦点问题 正常情况下,出现验证码的页面会弹出键盘,此效果很好实现,给TextField指定自动获取焦点即可,代码如下: TextField( autofocus:true, ... ) 如果页面还有其他输入框...输入完成后,通常需要关闭键盘,即TextField失去焦点失去焦点方法如下: _focusNode.unfocus(); 使用 使用非常简单,如下: Container( height: 45,...onSubmitted,用法如下: VerificationBox( onSubmitted: (value){ print('$value'); }, ) 输入完成后,默认键盘消失,设置为不消失

1.8K40

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

focusNode 手动获取焦点,可配合键盘输入等减少用户操作次数,直接获取下一个 TextField 焦点; FocusScope.of(context).requestFocus(node); return..., BlacklistingTextInputFormatter.singleLineFormatter ]); onChanged 文本内容变更回调,可实时监听 TextField 输入内容;...onEditingComplete 在提交内容回调,通常是点击回车按键回调; return TextField( onEditingComplete: () { Toast.show('... TextField 获取焦点弹出输入输入框可能会将页面中元素顶上去,为避免此情况,可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可,resizeToAvoidBottomPadding... TextField 设置 enableInteractiveSelection 属性后长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; 在 pubspec.yaml 中集成 flutter_localizations

4.5K51

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

icon显示在输入框的前面,用法如下: TextField( decoration: InputDecoration( icon: Icon(Icons.person), ), ) 输入框是空而且没有焦点...,labelText显示在输入框上边,获取焦点或者不为空labelText往上移动一点,labelStyle参数表示文本样式,具体参考TextStyle, 用法如下: TextField( decoration...labelText: '姓名:', labelStyle: TextStyle(color:Colors.red) ), ) hasFloatingPlaceholder参数控制输入框获取焦点或者不为空是否还显示...onChanged是内容发生变化时回调,onSubmitted是点击回车或者点击软键盘上的完成回调,onTap点击输入回调,用法如下: TextField( onChanged: (value...(); TextField( focusNode: _focusNode, ... ) 动态失去焦点 _focusNode.unfocus(); 过渡颜色的文字 Builder( builder

7.2K10

Flutter 快速解析 TextField 的内部原理

IgnorePointer 它在 TextField 里主要用于处理当前输入框是否可用的的状态,比如 widget.enabled 或者 widget.decoration?....enabled 为 false ,IgnorePointer 就会屏蔽整个区域内的手势事件,从而让 TextField 会无法点击输入。...image 也就是 FocusNode 和 TextEditingController 这两者发生改变的时候,会让 InputDecorator 重新 rebuild 从而改变渲染效果,例如:输入输入内容...、焦点发生改变修改输入框的背景颜色。...所以本篇主要是通过介绍 TextField 的组成,以及解释内部各组成部分的作用,让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现,遇上问题或者需求,可以快速定位和解决问题,例如:

2.2K30

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

老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘。...对于单个页面来说,通过为 TextField 添加 focusNode,点击空白处使 TextField 失去焦点,实现如下: class DismissKeyboardDemo extends StatelessWidget...( focusNode: focusNode, ), ), ), ); } } App 中有多个页面多个 TextField...,此方式会增加大量重复的代码,因此全局添加点击空白处的监听: class MyApp extends StatelessWidget { @override Widget build(BuildContext...context) { return MaterialApp( title: 'Flutter Demo', builder: (context, child) => Scaffold

3.9K10

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

事件 onEditingChanged TextField 获得焦点(进入可编辑状态),onEditingChanged将调用给定的方法并传递true值; TextField 失去焦点,再次调用方法并传递...获得焦点将isNameFocused设置为true,失去焦点设置为false。...使用快捷键获得焦点 一个视图中有多个 TextField(包括 SecureField),我们可以直接使用Tab键按顺序在 TextField 中切换焦点,但 SwiftUI 并没有直接提供使用快捷键让某个...⌘ + T ,负责 email 的 TextField 将获得焦点,用户输入⌘ + ⌥ + ⇧ + A ,负责 address 的 TextField 获得焦点。...通过 TextContentType 获得建议 在使用某些 iOS app ,在录入文字时会在软键盘上方自动提示我们需要输入内容,比如电话、邮件、验证码等等。

13.1K10

flutter 输入框组件TextField的实现代码

我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们的TextField获得焦点,图标会自动变色,提示文字会自动上移。 ? 还可以看到 我加了一个onChanged。...输入框获取焦点/输入框有内容 会移动到左上角,否则在输入框内,labelTex的位置. suffixIcon: 输入框内侧右面的图标. icon : 输入框左侧添加个图标 在多个输入框内切换焦点 介绍一下...onEditingComplete的默认实现根据情况执行2种不同的行为: 完成操作被按下,例如“done”、“go”、“send”或“search”,用户的内容被提交给[controller],然后焦点被放弃...按下一个未完成操作(如“next”或“previous”),用户的内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。..., 当然你也可以添加个按钮 , 点击按钮执行这个方法来实现切换焦点的功能. keyboardType TextField成为焦点显示的键盘类型。

4.7K11

Flutter | 常用组件

大多数情况下我们都需要显示的提供一个 controller 来与文本框交互,如果没有提供,则 TextField 会自动创建一个 focusNode :用于控制 TextField 是否占有当前键盘输入焦点...不同的是后者的回调是 ValueChanged ,前者不接受参数 inputFormatters:用于指定输入格式,输入内容改变,会根据指定格式来校验 enable:若为...自定义样式 隐藏文本 TextField( obscureText: true, ) 隐藏后输入内容将不可见,变成密码类型了 键盘类型 TextField( keyboardType...,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个 Form 组件,他可以对 输入框进行分组,然后统一进行一些操作,如内容校验,重置,保存等 Form 继承自 StatefulWidget..., 为 true ,每一个自 FormField 都会自动校验合法性,并直接显示错误信息。

11.4K30

flutter:实现扫码枪获取数据源,禁止系统键盘弹窗

内部做了焦点切换能力,保证输入焦点取消后,能马上切换成扫码枪的焦点 onSubmit: 接收扫码枪返回的结果 两种场景能力支持 无输入框交互,获取扫码结果: @override Widget...如何获取扫码枪输入内容 使用过 flutter 编写输入框的同学都用过 TextField ,通过源码我们可以看到 TextField 的功能实现者是它的子节点:EditableText。...扫码枪本质上是一个外接的输入设备。将 EditableText 封装,控制隐藏。可通过获取 EditableText 的内容来获取扫码枪的输入内容。...省略非关键代码,直接定位到 EditableTextState 焦点变化时,调用了 _openOrCloseInputConnectionIfNeeded() 在 _openInputConnection...方法中通过 TextInput 唤起系统键盘 既然了解到了EditableText唤起键盘的逻辑,通过自定义 EditableText,将 TextInput.show 步骤过滤掉,只保留单纯的通过焦点获取输入内容的能力

24510

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

低级别事件指示Component已获得或失去输入焦点。 由组件生成此低级别事件(如一个TextField)。...组件获得或失去键盘焦点,可调用侦听器对象中的相关方法,并将 FocusEvent 传递给它。 API focusGained ? focusLost ?...3 如何编写焦点侦听器 每当组件获得或失去键盘焦点就会触发焦点事件。无论是通过鼠标,键盘还是以编程方式发生焦点变化,都是如此。...例如,焦点从按钮转到文本字段,按钮会触发焦点丢失事件(文本字段为相反的组件),然后文本字段会触发焦点获取事件(带有按钮作为相反的组件)。失去焦点以及获得焦点的事件可能是暂时的。...例如,窗口失去焦点,会发生一个临时的焦点丢失事件。临时获得焦点的事件发生在弹出菜单上。 ?

4.6K10

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

前面提到基础部件的时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际的界面吧 TextField const TextField({ Key key, this.controller..., // 定义一个 `TextEditingController` 实例,用来获取输入内容等操作 this.focusNode, // 定义一个 `FocusNode` 实例,判断当前输入框是否获取到焦点等操作...{ super.initState(); // 输入框获取到焦点或者失去焦点的时候回调用 _editNode.addListener(() { print('edit...(vertical: 8.0), // 监听输入内容的变化,会跟随输入内容进行改变 child: Text('我是文字内容监听:$_spyContent...,通过该方法进行修改,最后的效果图如下,输入框文字发生变化的时候,监听的 Text 内容会随之改变,获取内容的 Text 点击按钮了才发生变化 ?

1.9K50

Java-GUI编程之事件处理

比如进入、点击、拖放等动作的鼠标事件,再比如得到焦点失去焦点焦点事件。...WindowEvent 窗口事件, 窗 口状态发生改变 ( 如打开、关闭、最大化、最 小化)触发该事件 。 FocusEvent 焦点事件 , 组件得到焦点失去焦点 触发该事件 。...KeyEvent 键盘事件 , 按键被按下、松开、单击触发该事件。 MouseEvent 鼠标事件,进行单击、按下、松开、移动鼠标等动作 触发该事件。...事件 触发时机 ActionEvent 动作事件 ,按钮、菜单项被单击,在 TextField 中按 Enter 键触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值触发该事件...事件监听器 不同的事件需要使用不同的监听器监听,不同的监听器需要实现不同的监听器接口, 指定事件发生后 , 事件监听器就会调用所包含的事件处理器(实例方法)来处理事件 。

1.4K20

Flutter 专题】65 图解基本 TextField 文本输入框 (二)

labelText 为文本框描述标签,为 String 类型,直接编辑内容即可;labelStyle 为标签样式属性;TextField 获取焦点之后描述标签上移; return TextField(decoration...helperText 为文本框辅助标签,一般在文本框底部,提示性内容;helperStyle 为文本框辅助标签样式属性;与 TextField 是否获取焦点无变化; return TextField(decoration...hasFloatingPlaceholder 设置 TextField 获取焦点 labelText 是否向上浮动;设置为 false ,获取焦点后 labelText 隐藏,不会向上浮动; return...counter 系列为文本框右下角计数器,设置 maxLengths 通常会在右下角展示编辑字符数与整体数量比,可通过 counter 系列组件调整;counterText 为计数器展示内容;counterStyle...小扩展 在实际开发中,可能会随时需要关闭键盘,此时我们仅需监听一下即可;和尚监听一个文本输入框,输入字符长度大于 11 位即收起键盘; return TextField(controller

4.5K41

Java图形用户界面设计AWT事件处理

比如进入、点击、拖放等动作的鼠标事件,再比如得到焦点失去焦点焦点事件。...WindowEvent 窗口事件, 窗 口状态发生改变 ( 如打开、关闭、最大化、最 小化)触发该事件 。 FocusEvent 焦点事件 , 组件得到焦点失去焦点 触发该事件 。...KeyEvent 键盘事件 , 按键被按下、松开、单击触发该事件。 MouseEvent 鼠标事件,进行单击、按下、松开、移动鼠标等动作 触发该事件。...事件 触发时机 ActionEvent 动作事件 ,按钮、菜单项被单击,在 TextField 中按 Enter 键触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值触发该事件...事件监听器 不同的事件需要使用不同的监听器监听,不同的监听器需要实现不同的监听器接口, 指定事件发生后 , 事件监听器就会调用所包含的事件处理器(实例方法)来处理事件 。

11710

Flutter软键盘原理

Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。这个值为true的时候,页面会进行重新布局。...那么我们应该如何监听 Flutter 的键盘弹出和页面的高度变化? 我们从 Flutter 键盘弹出说起。...一个输入TextField焦点变化的时候,焦点变化会执行_openOrCloseInputConnectionIfNeeded 方法: if (_hasFocus && widget.focusNode.consumeKeyboardToken...如果不可见,就会根据 bottom inset 的占比去猜测。这个高度大于 0.18 的时候,就会认为是键盘弹出。..._onMetricsChangedZone); } 经过上面的理论分析,我们可以得出结论,Flutter 软键盘的高度变化体现在 metrics 的变化。

1.4K10

Flutter 组件集录 | 师于源码 - 与 TapRegion 的相遇

点击头像时会弹出一个浮层展示信息,点击其他位置,浮层会消失 并且点击的位置可以响应点击事件 。 这就说明浮层可以监听到其外部的点击事件,从而隐藏自己;同时也不会影响到此次的手势事件。...如下所示:浮层显示,点击下面的输入框,浮层消失输入框被激活。 这不就是我想要的东西吗! 既然源码中已经实现了,那还等什么! 源码翻烂也要把它的实现方式拎出来!... _foucusNode 焦点变化时,就会触发回调,从而实现对浮层移除的功能。 到这里,可以发现,本质上来说,外界区域的点击影响的是焦点的变化。...其中只有桌面端点击才会取消焦点,移动端在手指点击不会取消焦点。这是平台的差异性。这也是为什么 Autocomplete 组件默认在 移动端点击外界无法移除的根本原因。...介绍一下 groupId 的作用 比如对于 Autocomplete 组件来说,浮层也是输入框的外域,为什么点击浮层没有取消焦点呢?

1K80
领券