开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Flutter -当键盘隐藏时TextFormField变为空白

Flutter是一种跨平台的移动应用开发框架，由Google开发和维护。它使用Dart语言编写，并且可以同时在iOS和Android平台上构建高性能、美观的应用程序。

在Flutter中，TextFormField是一个用于接收用户输入的文本字段的小部件。当键盘隐藏时，TextFormField变为空白可能是由于以下几个原因：

键盘焦点丢失：当键盘隐藏时，如果TextFormField失去了焦点，它将不会显示任何文本。可以通过为TextFormField设置焦点节点来解决此问题。例如，可以使用FocusNode类创建一个焦点节点，并将其与TextFormField关联起来，以确保在键盘隐藏时保持焦点。
输入控制器问题：TextFormField使用一个输入控制器来管理用户输入的文本。如果输入控制器的值为空，TextFormField将显示为空白。可以通过确保输入控制器的值不为空来解决此问题。例如，可以在TextFormField的输入控制器中设置一个初始值，或者在用户提交表单之前验证输入控制器的值。
键盘隐藏事件处理问题：当键盘隐藏时，可以通过监听键盘隐藏事件来执行相应的操作。例如，可以使用键盘监听器来检测键盘隐藏事件，并在事件发生时更新TextFormField的状态或执行其他操作。

总结起来，当键盘隐藏时，TextFormField变为空白可能是由于焦点丢失、输入控制器问题或键盘隐藏事件处理问题。通过设置焦点节点、确保输入控制器的值不为空以及监听键盘隐藏事件，可以解决这个问题。

腾讯云提供了一系列与移动应用开发相关的产品和服务，例如云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品。更多关于腾讯云移动应用开发相关产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/product/mobile

相关搜索:Android布局-当键盘隐藏时防止布局缩小 Flutter TextFormField在键盘出现时隐藏 flutter-单击文本字段时，键盘会隐藏自身 flutter:当放入列中时，CustomPaint小部件变为空白 Flutter:当聚焦TextField时键盘不显示 Flutter:当键盘弹出时，ListView会处理小部件 React Native KeyboardAwareScrollView :当键盘隐藏时滚动至末尾单击键盘时，TextFormField隐藏在键盘后面在flutter中使用/点击TextFormField时，如何隐藏小部件？当EditText聚焦时隐藏键盘

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

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

3.9K1 0

【第21期】Flutter 文本框初始化时显示默认值

第一次创建时，controller会包含初始值， // 当用户修改文本框内容时，会修改controller的值。...但是现在有一种情况： **问题1: **当页面文本框中的初始值是动态的，从后台获取到的时候，应该怎么办呢？这种情况下，说明创建TextEditingController时，并不知道文本内容。...这种情况我根本没遇到过，但是我觉得Flutter肯定有解决方法。...所以我去找了一下Flutter的文档，总算是没有白找，找到了一个(https://api.flutter.dev/flutter/material/TextFormField-class.html)[组件...意思就是说，当不指定controller时，initialValue 就可以自动生成controller的初始值。既然有解决方案，那么就是修改一下代码即可。

4.4K2 0

使用 FocusScopeNode 在 TextFormFields 之间轻松移动焦点

---- Form和TextFormField是在 Flutter 中输入文本时非常有用的小部件。我们可以提供一种在键盘上按“下一步”时移动输入焦点的便捷方法吗？...假设您有一个电子邮件和密码输入表单，如下所示： import 'package:flutter/material.dart'; class EmailPasswordSignInForm extends...CrossAxisAlignment.stretch, children: [ // email TextFormField...onEditingComplete: _node.nextFocus, ), // password TextFormField

1.2K2 0

每日tips：FocusScopeNode移动焦点你用对了吗？

在 Flutter中，Form和TextFormField是输入文本时非常有用的Widget。我们如何在键盘上按“下一步”时，正确的移动输入焦点的呢？...crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // email TextFormField...onEditingComplete: _node.nextFocus, ), // password TextFormField...), ), ); } } 通过添加一个FocusScopeNode 和 FocusScope关联，通过使用_node.nextFocus就可以轻松地将焦点移动到下一个TextFormField

7802 0

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

包括提醒字样，hint 等等 TextInputType keyboardType, // 输入文本类型，例如数字，email 等等 this.textInputAction, // 键盘确认按钮的事件类型...this.textDirection, // 文字方向 this.autofocus = false, // 是否自动获取焦点 this.obscureText = false, // 文字是否隐藏...，通过该方法进行修改，最后的效果图如下，当输入框文字发生变化的时候，监听的 Text 内容会随之改变，获取内容的 Text 当点击按钮了才发生变化 ?...导入第三方插件其实 Flutter 中缺少很多功能，需要通过导入第三方插件来实现功能，插件就是 Flutter 和原生交互的桥梁，也就是说，要写 Flutter 的插件，需要写 Android 和 iOS...AssetImage('images/login_bg.png'), fit: BoxFit.cover)), // 先忽略...下面会讲，主要是解决软键盘弹出的时候

1.9K5 0

《Flutter》-- 4.Flutter组件基础

当创建一个StatefulWidget组件时，同时也会创建一个State对象，StatefulWidget就是通过与State对象进行关联来管理组件状态树的。...4）flexibleSpace：位于标题下面的空白空间。 5）bottom：位于导航栏底部的自定义组件。 6）elevation：控制下方阴影栏的坐标。...didUpdateWidget()：当组件的配置发生变化或执行热重载时，系统会回调该函数更新视图。...dispose()：当状态组件需要被永久地从视图树中移除时，调用dispose()。调用dispose()后，组件会被销毁，在调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...obscureText：是否隐藏正在编辑的文本内容。 maxLines：输入框文本的最大行数，默认为1. maxLength：输入框中允许的最大字符数。

12.4K3 0

Flutter Form表单控件超全总结

[1240] 注意：无特殊说明，Flutter版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Form、FormField、TextFormField...TextFormField TextFormField继承自FormField，是一个输入框表单，因此TextFormField中有很多关于TextField的属性，TextFormField的基本用法...null:'账号最少6个字符'; }, ) TextFormField效果如下： [1240] onSaved是一个可选参数，当Form调用FormState.save时才会回调此方法。...autovalidate参数为是否自动验证，设置为true时，TextField发生变化就会调用validator，设置false时，FormFieldState.validate调用时才会回调validator...onChanged：当子表单控件发生变化时回调。欢迎加入Flutter的微信交流群(mqd_zzy)，让我们一起学习，一起进步，开始我们的故事，生活不止眼前的苟且，还有诗和《远方》。

3.1K0 0

Flutter Form表单控件超全总结

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 Form、FormField、TextFormField是表单相关控件...TextFormField TextFormField继承自FormField，是一个输入框表单，因此TextFormField中有很多关于TextField的属性，TextFormField的基本用法...null:'账号最少6个字符'; }, ) TextFormField效果如下： ? onSaved是一个可选参数，当Form调用FormState.save时才会回调此方法。...autovalidate参数为是否自动验证，设置为true时，TextField发生变化就会调用validator，设置false时，FormFieldState.validate调用时才会回调validator...onChanged：当子表单控件发生变化时回调。

2.1K2 0

Flutter TextField详解

文章目录基本属性 TextField InputDecoration 样式基础样式隐藏文本键盘类型键盘按钮大小写光标最多行数计数器图标提示文字去除下划线边框获取输入内容关闭软键盘...校验异常总结 github：[https://github.com/yechaoa/wanandroid_flutter](https://github.com/yechaoa/wanandroid_flutter...regExp.hasMatch(value)) { return "手机号格式不正确"; } return null; } 以上只是我们一般的校验，表单的话还是建议使用From包裹TextFormField...总结以上就是全部介绍了，然后写了个登录注册的小demo： github：https://github.com/yechaoa/wanandroid_flutter 官方文档：https://api.flutter.dev.../flutter/material/TextField-class.html

4K4 0

Flutter | 常用组件

300, fit: BoxFit.cover, color: Colors.red, colorBlendMode: BlendMode.difference, ) repeat：当图片本身大小小于显示空间时...当 Switch 或者 CheckBox 被点击时，会触发 onChanged 回调，我们可以回调中改变逻辑 class SwitchAndCheckboxTest extends StatefulWidget...不同的是后者的回调是 ValueChanged ,前者不接受参数 inputFormatters：用于指定输入格式，当输入内容改变时，会根据指定格式来校验 enable：若为...TextField( obscureText: true, ) 隐藏后输入的内容将不可见，变成密码类型了键盘类型 TextField( keyboardType: TextInputType.number...}) 复制代码为了方便使用，Flutter 提供了一个 TextFormField 组件，他继承自 FormField 类，也是一个包装类，所以除了 FormField 之后，它还包括 TextField

11.3K3 0

『Flutter』常用组件表单

onWillPop：当用户尝试离开表单页时触发的回调，可以用于提示保存更改。 onChanged：当表单内任意一个表单字段的内容发生变化时调用的回调函数。...Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextFormField...'), ), ), ], ), ); } } 在这个例子中，创建了一个带有 GlobalKey 的表单，它包含一个 TextFormField...用于输入和验证邮箱地址，并有一个提交按钮，当表单验证通过时会显示一个提示。...4.参考资料 https://api.flutter.dev/flutter/widgets/Form-class.html End 如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。

3481 0

Flutter 从 TextField 安全泄漏问题深入探索文本输入流程

之后我们通过 TextField 的 controller 清空输入文本，销毁当前页面，跳转到空白页面下后，同时在 Flutter devTool 上主动点击 GC 清理数据，最后再回到终端执行 find...在 Android 上，当输入法要和某些 View 进行交互时，系统会通过View 的 onCreateInputConnection 方法返回一个 InputConnection 实例给输入法用于交互通信...，例如通过它显示/隐藏键盘，或者配置一些键盘特性； ListenableEditingState：用于保存当前编辑状态，如文本内容、选择范围等等，因为 InputConnection 会需要一个 Editable...；简单介绍完这些对象的作用，我们回到文本输入的流程上，当用键盘输入完内容时，文本输入内容会进入到 InputConnectionAdaptor 的 endBatchEdit ，然后如下图所示：键盘输入的内容会保存在...，会直接通过 TextInputChannel 将 code 发送到 Dart ； sendKeyEvent ：当某些特殊按键输入时会被回调，例如点击退格键时，但是这个取决于输入的不同，例如小米安全键盘输入法的退格键就不会触发

1.4K3 0

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

image 如上图所示，可以看到在键盘 B 页面打开后，退回上一个页面 A 时键盘已经收起，但是原先键盘所在的区域在 A 页面变成了空白，而 A 页面内容也被 resize 成了键盘弹出后的大小。...在 Flutter 中 Scaffold 默认情况下 resizeToAvoidBottomInset 为 true，当 resizeToAvoidBottomInset 为 true 时，Scaffold...官方的解释是： “可以被系统显示的区域，通常是和设备的键盘等相关，当键盘弹出时 viewInsets.bottom 对应的就是键盘的顶部。”...其实 Window 的值来源于 Flutter Engine，在键盘弹出时 Flutter Engine 会通过 _updateWindowMetrics 方法更新 Window 数据，并执行 window.onMetricsChanged..._onMetricsChangedZone); } 所以可以看到，当键盘弹出和收起时，Engine 会更新 Window 的数据，Window 触发界面绘制更新，同时更新 MaterialApp 中的

1.2K8 0

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

obscureText 是否隐藏编辑内容，常见的密码格式； return TextField(obscureText: true); ?...:flutter/services.dart； a....当 TextField 获取焦点弹出输入框时，输入框可能会将页面中元素顶上去，为避免此情况，可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可，resizeToAvoidBottomPadding...当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单，默认为英文，可通过设置 Flutter 国际化来处理；在 pubspec.yaml 中集成 flutter_localizations...； dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型

4.5K5 1

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

Function(BuildContext context)，使用者自己UI作为子节点 scanNode: 非必传，如果传，可通过 scanNode 监听获取当前扫码可用状态，hasFocus 时为可用...版本进行定制，小编使用的是 Flutter 2.8.1 ，后续更新通用方案。...将 EditableText 封装，控制隐藏。可通过获取 EditableText 的内容来获取扫码枪的输入内容。...控制隐藏可使用 Offstage 标签： return Stack( children: [ //让输入框保持隐藏 Offstage(child: edtWidget...省略非关键代码，直接定位到 EditableTextState 当焦点变化时，调用了 _openOrCloseInputConnectionIfNeeded() 在 _openInputConnection

1411 0

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

icon显示在输入框的前面，用法如下： TextField( decoration: InputDecoration( icon: Icon(Icons.person), ), ) 当输入框是空而且没有焦点时...，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，labelStyle参数表示文本样式，具体参考TextStyle，用法如下： TextField( decoration...用户名长度为6-10个字母', helperStyle: TextStyle(color: Colors.blue), helperMaxLines: 1 ), ) hintText是当输入框为空时的提示...keyboardType参数控制软键盘的类型，说明如下： text：通用键盘。 multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。...onChanged是当内容发生变化时回调，onSubmitted是点击回车或者点击软键盘上的完成回调，onTap点击输入框时回调，用法如下： TextField( onChanged: (value

7.2K1 0

Flutter 全栈式——基础控件

因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。...textInputAction TextInputAction 用于设置键盘动作（一般位于右下角，默认是完成） textCapitalization TextCapitalization 配置平台键盘如何选择大写或小写键盘...onChanged ValueChanged 输入文本发生变化时回调 onEditingComplete VoidCallback 点击键盘完成按钮时触发的回调，无参数 onSubmitted...", hintText: "hintText", prefixIcon: Icon(Icons.perm_identity), ), ); 小技巧当输入框的默认线框无法满足时...focusColor Color 获取焦点时按钮颜色 splashColor Color 水波纹效果的初始化颜色 hoverColor Color 当指针悬停在按钮上时的填充颜色 highlightColor

3.7K4 0

详解Android中获取软键盘状态和软键盘高度

，执行回退操作，这时就需要判断，如果软键盘刚刚由显示变为隐藏状态，就不执行回退操作。...注册布局变化监听在Android中当软键盘由隐藏变为显示，或由显示变为隐藏时，会触发当前布局中View的全局布局变化。通过监听全局布局的变化就可以得知软键盘的状态。...当软键盘由隐藏变为显示，或由显示变为隐藏时，都会调用当前布局中所有存在的View中的ViewTreeObserver对象的dispatchOnGlobalLayout()方法，此方法中会遍历所有已注册的...当软键盘显示时，窗口的可见区域大小会被压缩，当软键盘隐藏时，窗口的可见区域大小会还原。...在主Activity中，当软键盘状态发生改变时通知监听者。完整示例代码完整的示例代码如下。

2.7K2 0

『Flutter』警告修复 & 常用组件 TextField

『Flutter』常用组件 TextField1.前言经过上一篇文章的介绍，给大家讲述了 Flutter 中的有无状态组件，以及有状态组件的使用方法，本文将继续围绕着 Flutter 中常用的组件来讲述一下...本次要讲述的组件有：TextField2.TextField2.1.介绍Flutter 的 TextField 组件是一个用于文本输入的基础组件，它提供了用户输入文本的界面。...keyboardType：用于指定键盘类型，例如数字键盘、邮箱键盘等。obscureText：一个布尔值，用于控制是否隐藏输入内容，常用于密码输入。onChanged：当文本发生变化时触发的回调函数。...onSubmitted：用户在键盘上按下完成按钮时触发的回调函数。enabled：一个布尔值，用于控制 TextField 是否启用。...3.参考资料https://api.flutter.dev/flutter/material/TextField-class.htmlEnd如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流

2741 1

flutter 起步

==> onUnknownRoute7. navigatorObservers路由观察器，当调用Navigator的相关方法时，会回调相关的操作8. builder当构建一个Widget前调用一般做字体大小...当为true时，打开呈现到屏幕位图的层的棋盘格21. showSemanticsDebugger当为true时，打开Widget边框，类似Android开发者模式中显示布局边界22. debugShowCheckedModeBanner...，重新布局避免被键盘盖住内容。...，重新布局避免被键盘盖住内容。...变为 Toolbar 的时候，修改 elevation 的值。

4.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭