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

flutter TextField粘滞,当我完成其他项目时,光标会跳回它

flutter TextField粘滞是指在使用Flutter的TextField组件时,当用户输入完毕并切换到其他项目后,再次回到TextField时,光标会自动跳回到原来的位置。

这个问题的解决方法是使用FocusNode来控制TextField的焦点。FocusNode是一个用于管理输入焦点的类,可以通过它来控制TextField的焦点状态。

首先,需要在StatefulWidget的状态类中创建一个FocusNode对象,并在TextField的focusNode属性中指定这个FocusNode。这样就可以控制TextField的焦点。

下面是一个示例代码:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

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

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _focusNode,
      decoration: InputDecoration(
        labelText: 'Enter text',
      ),
    );
  }
}

在上面的示例中,我们创建了一个FocusNode对象,并在TextField的focusNode属性中指定了这个FocusNode。这样,当用户切换到其他项目后,TextField将失去焦点,光标也就不再粘滞。

如果需要在用户完成输入后自动跳转到其他项目,可以监听TextField的onEditingComplete回调,并使用FocusScope将焦点转移给其他项目。例如:

代码语言:txt
复制
class _MyWidgetState extends State<MyWidget> {
  FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _focusNode,
      decoration: InputDecoration(
        labelText: 'Enter text',
      ),
      onEditingComplete: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
    );
  }
}

在上面的示例中,我们通过onEditingComplete回调监听用户完成输入的事件,并使用FocusScope将焦点转移给一个新创建的FocusNode。这样,当用户完成输入后,焦点会自动跳转到其他项目,光标也就不会再粘滞了。

推荐的腾讯云相关产品:云开发(CloudBase) 产品介绍链接地址:https://cloud.tencent.com/product/tcb

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

相关·内容

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

相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField的用法。...然后我们试一下的属性 TextField( keyboardType: TextInputType.number, decoration: InputDecoration(...我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们的TextField获得焦点,图标会自动变色,提示文字会自动上移。 ? 还可以看到 我加了一个onChanged。...关于TextField其他用法就不在一一介绍了,有兴趣的小伙伴可以自己尝试下. 使用decoration美化输入框 先看一下效果: ?...当按下一个未完成操作(如“next”或“previous”),用户的内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。

4.8K11

输入和选择

相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField的用法。...可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。 当然,我们也可以为输入框做一些其他的效果,如提示文字,icon、标签文字等。...我们给上面的代码新增decoration属性,可以发现当我们的TextField获得焦点,图标会自动变色,提示文字会自动上移。 接下来,我们来看下onChanged和onSubmitted。...关于TextField其他用法就不在一一介绍了,有兴趣的小伙伴可以自己尝试下。...小结 可以根据TextField的相关属性来完成特定的输入需求 CheckBox、Radio、Switch是开发中常用的选择组件 Slider滑块组件,可以满足用户对进度的精确控制 CheckboxListTile

2.4K20
  • Flutter 网络操作

    Flutter中的网络操作 ---- 跟前面讲到的本地存储操作一样,Flutter给我们提供了第三发库的支持,同样的下面三个操作 打开项目的pubspec.yaml配置我文件在dependencies:...import ‘package:http/http.dart’ as http 然后我们可以在我们代码中执行如如操作就可以完成http的请求 当然同样支持,get、delete、head、path...(13613): 请求完成 嗯,和我们的预期一样,现在走了catchError的回调。...当我们点击RaisedButton就会获取TextField输入的内容并且去请求服务器并返回。 对了,在上面的代码中还用到了一个User对象,这是需要自己定义的用来存储接口返回信息的。...当然在使用服务端反悔的数据的时候需要执行判空操作哦 当然,大家也可以在用户点击按钮弹出dialog提示再请求完成去除dialog显示,这个例子比较丑大家明白怎么使用就ok啦。

    3.3K40

    使用 Flutter 制作地图应用

    对于本教程,您将不需要 google maps API,因此您无需支付任何费用,因为我们将使用另一个免费 API,所以不用多说,让我们深入研究。...依赖关系 创建一个新的 Flutter 项目,然后添加一些我们将要使用的依赖项。打开您的pubspec.yaml文件并在依赖项中添加这些行。...不显示下划线 DART 123456 TextField( decoration: InputDecoration( labelText: "选中没有下划线", focusedBorder...自定义下划线样式 DART 12345678 TextField( decoration: InputDecoration( labelText: "选中的下划线颜色",...输入完成的时候,这个时候我们可以拿到输入内容做一些操作。 与键盘事件的配合,在必要的时候回收键盘。 TextField提供了三个回调方法 onChanged 此方法是在输入有变化的时候就会回调。

    2.7K00

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

    老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握...设置斜体: Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,)) 设置自定义的字体: 首先下载字体库(比如中华字体库) 将字体文件拷贝的项目中...unspecified:让操作系统自己决定哪个合适,一般情况下,android显示“完成”或者“返回”。 done:android显示代表“完成”的按钮,ios显示“Done”(中文:完成)。...textCapitalization参数是配置键盘是大写还是小写,仅支持键盘模式为text,其他模式下忽略此配置,说明如下: words:每一个单词的首字母大写。...onChanged是当内容发生变化时回调,onSubmitted是点击回车或者点击软键盘上的完成回调,onTap点击输入框回调,用法如下: TextField( onChanged: (value

    7.3K10

    Flutter Interact 的 Flutter 1.12 大进化和回顾

    image 使用 Flutter Web 和 Flutter MacOS 需要通过如下命令行打开配置,并且执行 flutter create xxxx 就可以创建带有 Web 和 MacOS 的项目(如果已有项目也可以执行...放心,这个坑不是谷歌 Flutter 团队开的,属于另外一家商业公司。...image 在导入 Sketch 文件后可以看到设计师完成的界面效果,同时选中 "" 按键,可以在右侧看到对应的 Flutter 代码,左侧可以看到对应的层级设计,但是这时候的代码看起来还比较简单和笨重...image 当然, Spuernova 并不是什么完全的公益项目,目前只有对于 Flutter 的简单支持上是免费的,其他项目支持还是处于收费状态。 ?...不过既然是开源项目,“白嫖”之余也得多靠自己,上述问题经过查找后,在自定义的 ImageProvider 里图片加载失败,可以通过清除了 ImageCache 中的 PendingImage 来解决问题

    2.3K30

    setState

    ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项,下面的ListView动态更新 2. 条目的复选框选中,条目的文字自动添加下划线 3....var textField = TextField( controller: new TextEditingController(text: this.text), keyboardType:...状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击,将加入到状态值todo中 3.todo用来渲染Todo列表...结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究,那就跟随我的脚步,完成一次Flutter之旅。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

    95720

    使用原生开发高仿瑞幸小程序(一):使用 Vant 组件库和配置多页面

    等小程序开发的差不多了,再用flutter开发 app端。那个时候,flutter的web开发应该也成熟了吧。我会再用Electron将web端打包成桌面端。对,所有的活都有我一个人完成。...至此,我们就完成了小程序项目的创建。再下面的章节中,我们就要开始具体的编码工作了。其中,我们会用到来自有赞团的小程序UI组件库Vant Weapp。...在这一篇教程中,我们要完成以下几件事。 1 整理项目文件 2 引入有赞UI库vant weapp 在上一篇教程中,我们创建了小程序。小程序默认的项目有太多demo,是我们不需要的。...当我完成页面的搭建后,我们就要来做一些交互了。比如选中van-tabbar-item的时候,图标会进行切换,同时展示不同的界面。这一切,就要跟home.js 文件进行交互了。...好了,当我完成以下代码,我们就完成了不同组件的切换。

    2K21

    Flutter】评级对话框组件

    F「lutter」是一个免费和开源的项目,由Google创建并维护,是我们喜欢Flutter的原因之一。Flutter提供了漂亮的预构建组件,这些组件在flutter中被称为Widget。...pub地址:https://pub.dev/packages/rating_dialog 评分对话框 评分对话框是Flutter出色且适应性强的星级评分对话框包!支持flutter支持的所有阶段。...当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。...表示对话框的消息/描述文本,「图像」,「submitButton」表示提交按钮的标签/文本,「onSubmitted」表示返回带有用户的评分和评论值,「onCancelled」表示用户取消/关闭对话框的调用...当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。 在此对话框中,您将看到我们将添加图像,标题,描述,星级,评论的textField和最后一个提交按钮。

    4.1K50

    Flutter 中使用Chip 小部件【Flutter专题30】

    作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。...本文是关于 Flutter 中的 Chip 小部件。我们将大致了解小部件的基本原理,然后通过代码来实现。事不宜迟,让我们开始吧。 概述 典型的chip是一个圆角的小盒子。...您可以在官方文档中找到有关其他属性的更多详细信息。但是,对于大多数应用程序,我们不需要超过一半。 简单示例 这个小例子向您展示了一种同时显示多个chip的简单使用的方法。...当当前行的可用空间用完,筹码会自动下行。由于Wrap 小部件的间距属性,我们还可以方便地设置chip之间的距离。...按下此按钮,将显示一个对话框,让我们添加一个新chip。可以通过点击与其关联的删除图标来删除每个chip。

    2.8K20

    Flutter开发中的一些Tips

    当然自己也是边查边写,也借鉴了许多Github上优秀的Flutter项目。现在开源出来(附带设计图),供大家交流学习。希望多多Star、Fork支持,有问题可以Issue。...的keyboardType属性设置为TextInputType.phone 或TextInputType.number,IOS系统弹出的数字输入键盘没有"完成"按钮,导致输入法无法关闭。...大家可以看一下前后对比图,具体实现代码可以参考flutter_keyboard_actions的文档和我的项目代码: 当然平台差异不仅仅是这么多,比如IOS自带侧滑返回等。...比如TextInputType.phone可以使用WhitelistingTextInputFormatter 白名单校验,只允许输入0~9: TextField( keyboardType...使用场景是给一些无点击事件的部件添加点击事件使用(也支持长按、双击等事件),同时你也可以去修改的颜色和形状。

    2.1K30

    Flutter应用程序添加交互性 顶

    管理状态 小部件管理自己的状态 父母管理小部件的状态 混搭方法 其他交互式小部件 标准小部件 材料组件 资源 准备好 如果您已经在Flutter布局中构建布局,请跳到下一节。...在您的项目中创建一个图像目录,并添加lake.jpg。 一旦你有一个连接和启用的设备,或者你已经启动了iOS模拟器(Flutter安装的一部分),你很好!...在这个例子中,切换星号是一个独立的操作,不会影响父窗口小部件或其他用户界面,因此窗口小部件可以在内部处理的状态。 在管理状态中了解更多关于窗口小部件和状态的分离以及如何管理状态的信息。...随着用户点击,添加高亮(实现为深绿色边框)。 当用户释放水龙头,它会消除高。 按下,抬起或点击取消调用setState()更新界面并且_highlight状态改变。...Flutter API文档:所有Flutter库的参考文档。 Flutter画廊:演示应用程序展示了许多材质组件和其他Flutter功能。

    4.2K20

    redux

    : ^0.5.3 ---- 1.初始项目的Redux化 大家应该都还记得初始项目吧,下面是的梳理图,磨刀不误砍柴工。...我打算从开始入手,向你简单介绍redux是什么? ---- 1.1:分析行为及变化 很简单,行为是点击,变化是数字的自增长。...2.1:增加一个功能 比如我想要点一下加10该怎么办?使用redux你需要定义一个行为,及响应。 在行为分发修改行为即可。也许你说我不用redux,改行就行了。...import 'package:flutter/material.dart'; import 'package:flutter_redux/flutter_redux.dart'; class SecondPage...---- 结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究,那就跟随我的脚步,完成一次Flutter之旅。

    82730
    领券