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

Flutter:关闭软键盘后如何保持TextField值

Flutter是一种跨平台的移动应用开发框架,可以帮助开发者快速构建高性能、美观的应用程序。在Flutter中,关闭软键盘后保持TextField的值可以通过以下几种方式实现:

  1. 使用FocusNode和FocusScope:可以通过创建一个FocusNode对象,并将其传递给TextField的focusNode属性。然后,在TextField外部包裹一个FocusScope组件,并将其传递给FocusScope的node属性。这样,当软键盘关闭时,焦点仍然保留在TextField上,从而保持TextField的值不变。
代码语言:txt
复制
FocusNode _focusNode = FocusNode();

FocusScope(
  node: FocusScopeNode(),
  child: TextField(
    focusNode: _focusNode,
    // 其他属性...
  ),
)
  1. 使用TextEditingController:可以创建一个TextEditingController对象,并将其传递给TextField的controller属性。然后,在关闭软键盘时,可以通过调用TextEditingController的clear方法来清空TextField的值。这样,即使软键盘关闭,TextField的值也会保持不变。
代码语言:txt
复制
TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
  // 其他属性...
)

// 关闭软键盘后清空TextField的值
void _closeKeyboard() {
  FocusScope.of(context).requestFocus(FocusNode());
  _controller.clear();
}
  1. 使用GlobalKey:可以创建一个GlobalKey对象,并将其传递给TextField的key属性。然后,在关闭软键盘时,可以通过调用GlobalKey的currentState属性来获取TextField的当前状态,并获取其值。这样,即使软键盘关闭,TextField的值也会保持不变。
代码语言:txt
复制
GlobalKey<FormFieldState<String>> _formKey = GlobalKey<FormFieldState<String>>();

Form(
  key: _formKey,
  child: TextFormField(
    key: _formKey,
    // 其他属性...
  ),
)

// 关闭软键盘后获取TextField的值
void _closeKeyboard() {
  FocusScope.of(context).requestFocus(FocusNode());
  String value = _formKey.currentState.value;
}

以上是几种常见的方法来保持TextField的值不变,具体选择哪种方法取决于开发者的需求和场景。腾讯云提供的相关产品和服务可以参考腾讯云官方文档:腾讯云

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

相关·内容

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

老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握...Colors.blue.withOpacity(.4), child: Text('老孟', textAlign: TextAlign.center), ), textAlign只是控制水平方向的对齐方式,说明如下...如果需要2个TextField的内容进行同步,只需要给2个TextField设置同一个controller即可实现。 keyboardType参数控制软键盘的类型,说明如下: text:通用键盘。...onChanged是当内容发生变化时回调,onSubmitted是点击回车或者点击软键盘上的完成回调,onTap点击输入框时回调,用法如下: TextField( onChanged: (value...发展前景如何?'

7.2K10

当永恒的软键盘问题遇到Flutter

移动端开发的同学可能或多或少都遇到过软键盘的问题。不是被遮住布局就是布局顶不上去。那么使用 Flutter 的时候,遇到软键盘出来的时候又会遇到什么问题呢?...从场景开始说起 我的场景是一个从底部弹出的 Dialog,Dialog 里主要就是一个 TextField 输入框。...Flutter 因为是响应式的布局开发,和 Android 这种命令式开发一个很大的区别就是基本避免直接操作一个 ui 的元素,这时候会遇到 2 个问题 如何获取宽高 build的时候元素还没渲染完毕,...又如何获取宽高 Flutter 中我们可以使用 context 去获取: context.size.height 或者 (context.findRenderObject() as RenderBox)...的情况可以和软键盘划等号了。

3.2K30

ios学习——键盘的收起

在开发过程中,我们经常会用到UITextField、UITextView等文本框,然后这些文本框在点击之后会自动成为第一响应者(FirstResponder),并自动弹出软键盘。...然而,没有自动定义好的软键盘的回收。今天,我在开发过程中就遇到了这个问题,首先,软键盘收起会发生在两种情况下,一是当前区域为非第一响应者,二是当前区域的输入结束。...当点击事件发生在非选中区域时,则键盘会自动回收: 1 //在viewDidLoad中 添加点击手势,为了关闭键盘的操作 2 UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer...delegate 2 - (BOOL)textFieldShouldReturn:(UITextField *)textField { 3 [textField resignFirstResponder...但是,我们可以根据UITextViewDelegate提供的方法对键盘输入的进行判断,如果为回车键(\n)则设置当前UITextView不是第一响应者,否则不操作。

1.8K60

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

前面提到基础部件的时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际的界面吧 TextField const TextField({ Key key, this.controller...TextEditingController _editController = TextEditingController(); FocusNode _editNode = FocusNode(); // 保存按钮点击的输入内容...接着新建个 third_icons.dart文件 import 'package:flutter/material.dart'; class ThirdIcons { // codePoint 通过打开...导入第三方插件 其实 Flutter 中缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 和原生交互的桥梁,也就是说,要写 Flutter 的插件,需要写 Android 和 iOS...AssetImage('images/login_bg.png'), fit: BoxFit.cover)), // 先忽略...下面会讲,主要是解决软键盘弹出的时候

1.9K50

【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色 | 代码生成控件 | 动画设置 )

Keyboard 点一下这个选项即可弹出软键盘, 这样点击 TextField 控件才会弹出虚拟机的软键盘; 2.设置 TextField 键盘类型 : 在 Main.storyboard 中选中...TextField 控件, 选择 属性查看器, 设置其中的 keyboard Type, 设置为 Number Pad 数字键盘; 3.退出软键盘方式 : 两种方式 ① 哪个 TextField...触发的, 通过对应的 TextField 控件 关闭键盘; ② 通过 父控件 关闭 软键盘; ① 谁触发谁关闭 : 调用控件的 resignFirstResponder 方法 退出软键盘, 该方法只能关闭控件本身触发的软键盘..., 示例 [self.textField resignFirstResponder] 关闭 textField 属性对应的控件触发的软键盘; ② 通过父控件关闭 : 调用界面的根节点 view 的 endEditing...方法关闭软键盘; 代码 [self.view endEditing:YES] 关闭 view 控件 及其 子控件 触发的软键盘; ---- ( 7 ) 实现加法逻辑 实现计算逻辑 : 1.实现位置 :

4.7K30

Flutter 快速解析 TextField 的内部原理

FlutterTextField 是一个比较复杂的控件,而在整个 TextField 里嵌套了许多不同实现的控件,它们组成了我们常用的输入框效果,如下图所示是关于 TextField 的主要构成部分...还能继续保持之前获得的焦点。...MaterialApp 内部用到了 RootRestorationScope, 而RootRestorationScope 的内部就是 UnmanagedRestorationScope;上述例子运行通过打开模拟器开发者设置里的...”粘贴/复制“ 的 Toolbar 是哪里弹出; Toolbar 是如何定位和布局; 点击 TextField如何弹出键盘和处理手势事件; TextField 如何做到局部绘制; ......最后介绍一个简单的问题,之前有人刚好问我:如何Flutter 上实现类似微信聊天输入框从一行到多行的输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.2K30

Flutter 网络操作

如果您向同一服务器发出多个请求,则可以通过使用客户端而不是发出一次性请求来保持打开持久连接。...如果您这样做,请务必在完成关闭客户端: 同样的这个库同样支持你自定义自己的HTTPClient 好吧,接下来,我们来看个例子看看用起来在怎么样 看个例子 ---- 我们以github获取用户信息为例来看下...点击按钮控制台输出: I/flutter (13613): 请求开始 I/flutter (13613): 请求结果:{“login”:”flyou”,”id”:6630762,”avatar_url...界面很简单,最上面一个image,下面是几个ListTitle,在下面就是一个TextField,最下面就是就是一个RaisedButton了。...User.dart 可以发现User类里面很简单,只是定义了几个我们需要的属性,然后通过 定义fromJson方法把赋值给相应的属性(对Json数据格式不熟悉的童鞋自己去google看下哈) 那么我们来试一下效果吧

3.3K40

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

和尚最近在学习基础的 Flutter Widget,原因在于很多基础的组件有很多容易忽视的注意事项,了解并熟悉对整体的开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...onSubmit 在提交时回调,不可与 onEditingComplete 同时使用,区别在于 onSubmit 是带返回的回调; return TextField( onEditingComplete...长按输入框出现【剪切/复制/粘贴】的菜单如何设置中文?...当 TextField 设置 enableInteractiveSelection 属性长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; 在 pubspec.yaml 中集成 flutter_localizations...使用 maxLength 时如何取消文本框右下角字符计数器?

4.5K51

flutter  TextField换行自适应的实现

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性....现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter如何实现?...字号变大控件高度也变高同时保持指定的内外边距. 最重要的功能: 多行文本. 并且控件高度可以随着换行而增高 自定义最大行数: 即高度不是随着换行无限增高, 指定控件最大行数,文本框内容就可以滚动....指定了decoration中的contentPadding属性, 结果控件高度变化内边距的数值不对 3,4其实是一个问题, 我们期望像Android中的wrap_content属性, 字体的大小自适应...https://stackoverflow.com/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli

2.3K21

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

事件 onEditingChanged 当 TextField 获得焦点时(进入可编辑状态),onEditingChanged将调用给定的方法并传递true;当 TextField 失去焦点时,再次调用方法并传递...TextField 获得焦点 通过 FocusState,可以方便的实现在视图显示,立刻让指定的 TextField 获得焦点并弹出键盘: struct OnFocusDemo:View{ @...进行判断 为了避免在 TextField 失去焦点出现多次调用的情况,我们需要在视图层次保存上次获得焦点的 TextField 的 FocusState 。...取消键盘 有些情况下,在用户输入完毕,我们需要取消软键盘的显示,以便留出更大的显示空间。某些键盘类型并没有return按键,因此我们需要使用编程的方式让键盘消失。...关于如何TextField 的显示做更多的定制,之后会撰文探讨。 希望本文对你有所帮助。

13.1K10

Flutter中的路由与跳转

静态路由 ---- 在Flutter中有着两种路由跳转的方式,一种是静态路由,在创建时就已经明确知道了要跳转的页面和。另一种是动态路由,跳转传入的目标地址和要传入的都可以是动态的。...好吧,那么尝试下往下个页面传递数据,其实也很简单,我们给第二个页面加一个构造函数,并且把从第一个页面传递过来的赋给Text import 'package:flutter/material.dart'...Widget使用pop()方法会优先进行这些Widget的关闭操作。...还是上面的代码,我们把第二个页面的Text改成一个按钮,每当点击这个按钮就关闭掉这个页面。...这样我们就可以根据第二个页面返回的做相应的操作,如果你需要在接到返回更细界面,你需要使你的Widget继承StatefulWidget。

1.5K20
领券