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

TextField聚焦时触发的Flutter TextEditingController listener

是一个用于监听TextField聚焦状态的回调函数。在Flutter中,TextField是一个常用的用户输入控件,而TextEditingController是用于控制TextField的控制器。

当TextField聚焦时,可以通过TextEditingController的addListener方法来注册一个监听器,以便在聚焦状态发生变化时执行相应的操作。该监听器会在TextField聚焦状态发生变化时被调用。

以下是一个完整的示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Listener Example'),
        ),
        body: Center(
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Enter text',
            ),
            onChanged: (text) {
              // 监听文本变化
              print('Text changed: $text');
            },
            onTap: () {
              // 监听点击事件
              print('TextField tapped');
            },
            onEditingComplete: () {
              // 监听编辑完成事件
              print('Editing complete');
            },
            focusNode: FocusNode(),
          ),
        ),
      ),
    );
  }
}

在上述示例中,我们创建了一个TextField,并通过TextEditingController来控制它。通过addListener方法注册了一个监听器,当TextField聚焦状态发生变化时,会打印相应的信息。

推荐的腾讯云相关产品:腾讯云移动直播(https://cloud.tencent.com/product/mlvb)可以用于实时音视频直播,适用于直播、教育、电商等场景。

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

相关·内容

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

选择时间日期还是挺简单,不过需要注意flutter: 选择日期是:2019-07-30 00:00:00.000 flutter: 选择时间是:TimeOfDay(21:34) 两个方法选择时间...输入框 TextField TextFieldFlutter用户输入框,属性挺多,不同配置出不同效果,就像是HTML中 input 一样。...一起使用,在达到最大长度是否阻止输入 this.onChanged, //输入文本发生变化时回调 this.onEditingComplete, //点击键盘完成按钮触发回调,该回调没有参数...,(){} this.onSubmitted, //同样是点击键盘完成按钮触发回调,该回调有参数,参数即为当前输入框中值。...,常用属性也就是上面涉及到属性 关于 TextField 其他属性,可以自己尝试一下,比如自动聚焦,光标设置等等,在最上面的属性列表中都有注释,可以自行研究。

4.6K20

Flutter 快速解析 TextField 内部原理

FlutterTextField 是一个比较复杂控件,而在整个 TextField 里嵌套了许多不同实现控件,它们组成了我们常用输入框效果,如下图所示是关于 TextField 主要构成部分...image 也就是当 FocusNode 和 TextEditingController 这两者发生改变时候,会让 InputDecorator 重新 rebuild 从而改变渲染效果,例如:输入框输入内容...在 TextField 内部有一个 RepaintBoundary ,是因为 TextField 本身是一个需要频繁更新控件,而 TextField内容变化一般很少需要触发父布局重绘,所以...例如应用因为低内存在后台被回收,可以通过它在重新回到 App 恢复指定数据,举个例子: import 'package:flutter/material.dart'; void main() =...所以本篇主要是通过介绍 TextField 组成,以及解释内部各组成部分作用,让开发者可以更清晰了解 Flutter 里常用文本输入框实现,当遇上问题或者需求,可以快速定位和解决问题,例如:

2.2K30

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

Flutter』常用组件 TextField1.前言经过上一篇文章介绍,给大家讲述了 Flutter有无状态组件,以及有状态组件使用方法,本文将继续围绕着 Flutter 中常用组件来讲述一下...本次要讲述组件有:TextField2.TextField2.1.介绍Flutter TextField 组件是一个用于文本输入基础组件,它提供了用户输入文本界面。...TextField 允许用户输入文本,并且可以通过各种属性来定制其外观和行为。2.2.常用属性controller:类型为 TextEditingController,用于控制文本内容。...onChanged:当文本发生变化时触发回调函数。onSubmitted:用户在键盘上按下完成按钮触发回调函数。enabled:一个布尔值,用于控制 TextField 是否启用。...3.参考资料https://api.flutter.dev/flutter/material/TextField-class.htmlEnd如果您对本文有任何疑问或想法,请在评论区留言,我将很乐意与您交流

28811

Flutter 专题】08 小小优化【登录】页面

和尚刚开始在编辑内容块 content ,以为涉及 widget 元素不多,所占不会超过屏幕,所以根 widget 使用是 body: new Container(),但是在点击文本框 TextField...,弹出键盘会挡住部分 widget,并提示 Bottom OverFlowed By 85 pixels,如图: ?...优化三:调整键盘弹出样式 设置文本框 TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘方式:text/datetime...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框功能,如:showDialog/showMenu/showModalBottomSheet 等,和尚采用是对话框方式...相关注意 Flutter 提供了很多便利小图标,使用起来非常方便,和尚但就一个小【×】找到了好几个类似的图,希望可以多多尝试,体验一下。

1.4K51

Flutter路由与跳转

静态路由 ---- 在Flutter中有着两种路由跳转方式,一种是静态路由,在创建就已经明确知道了要跳转页面和值。另一种是动态路由,跳转传入目标地址和要传入值都可以是动态。...“Page2”,要跳转页面是Page2,每当我们点击屏幕正中央button都会触发调用 Navigator.of(context).pushNamed(“/page2”); Navigator就是在在...Flutter中负责页面导航,相信了解Android童鞋都知道这个玩意。...在前面的文章中,我们使用TextField举过一个例子,对用户输入用户名密码进行判断,当用户名是“flyou”,密码是“admin”提示登录成功,否则提示登录失败。...页面出栈 ---- 在Flutter中我们可以使用Navigator.of(context).pop()进行出栈操作,但是值得注意如果页面上有Dialog、BottomSheet、popMenu类似的

1.5K20

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

序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架魅力还是很吸引人哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍...FlutterText组件 和 FlutterImage组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件API 先来看一下TextFiled...,接下来我们一个一个来看这些属性: 1、controller 根据字面意思我们就可以知道,这是一个控制器,毫无疑问当然是控制 TextField 组件了,用处有很多,可以监听输入框输入(通过controller.addListener...1TextEditingController _textEditingController = new TextEditingController(); 2 3new TextField( 4...:默认情况,什么都不设置 8、onChanged 这个属性用来监听输入框输入,类似AndroidTextWatch,但是它只有输入后值: 1new TextField( 2 onChanged:

2.4K50

Flutter遇到节流与防抖思路和流程优化

前言 在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新用于创建移动应用开源库。 Flutter是什么呢?...Flutter是跨平台免费开源UI框架,iOS和Android可以共用一套代码。 Flutter是基于Dart语言编写。...当然,我这个节流函数并未像有些截留函数那样带有明显不可触发时间,这个函数不可触发时间为加载时间。...Flutter防抖 防抖函数定义为多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束执行。...当3s中内不输入信息,这个定时函数会触发。但是三秒钟内再次输入,这个定时函数又会被取消然后赋值新周期为3s定时函数。 这就是防抖函数实际应用。

1.8K61

《深入浅出Dart》Flutter实战之TODO应用

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 Flutter实战之TODO应用 在本篇文章中,我们将构建一个TODO应用,使用最新Dart语法和Flutter框架...这个TODO应用将具备添加、编辑、删除任务,以及任务状态管理等功能。让我们一步一步地构建这个TODO应用。 步骤 1:创建Flutter项目 首先,我们需要创建一个Flutter项目。...打开终端并执行以下命令: flutter create todo_app cd todo_app 这将创建一个名为todo_appFlutter项目,并进入项目目录。...当用户点击某个任务,会跳转到任务编辑页面并将对应任务传递过去。 步骤 4:创建任务编辑页面 我们将创建一个任务编辑页面,用于添加新任务或编辑现有任务标题、描述和完成状态。...您可以点击浮动按钮添加新 任务,点击任务列表项编辑任务标题、描述和完成状态。 参考资料 Dart官方文档 Flutter官方文档 Flutter实战教程

18720
领券