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

如何在TextFormField()上仅当在flutter中聚焦时才显示计数器文本?

在Flutter中,可以通过使用FocusNode和FocusScope来实现在TextFormField聚焦时显示计数器文本的效果。

首先,创建一个FocusNode对象,并将其与TextFormField关联起来。然后,使用FocusScope将FocusNode包装在一个Widget树中,以便管理焦点的范围。

以下是实现该效果的示例代码:

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

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 FocusScope(
      child: Column(
        children: [
          TextFormField(
            focusNode: _focusNode,
            decoration: InputDecoration(
              labelText: 'Input',
            ),
          ),
          Builder(
            builder: (BuildContext context) {
              if (_focusNode.hasFocus) {
                return Text('Counter: ${_getInputLength()}');
              } else {
                return Container();
              }
            },
          ),
        ],
      ),
    );
  }

  int _getInputLength() {
    // 获取输入文本的长度
    return 0;
  }
}

在上述示例中,创建了一个FocusNode对象 _focusNode,并将其与TextFormField的 focusNode 属性关联起来。然后,在TextFormField下方使用了一个Builder Widget,通过判断 _focusNode 是否具有焦点来决定是否显示计数器文本。

_getInputLength 方法中,可以根据实际需求获取输入文本的长度,并返回给计数器文本进行显示。

这样,当用户在TextFormField上聚焦时,计数器文本将显示出来,失去焦点时则隐藏。

关于Flutter的更多信息和相关产品,您可以访问腾讯云的官方文档和产品介绍页面:

请注意,以上答案仅供参考,具体实现方式可能因个人需求和项目要求而有所不同。

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

相关·内容

Flutter TextField详解

文章目录 基本属性 TextField InputDecoration 样式 基础样式 隐藏文本 键盘类型 键盘按钮 大小写 光标 最多行数 计数器 图标 提示文字 去除下划线 边框 获取输入内容 关闭软键盘...校验 异常 总结 github:[https://github.com/yechaoa/wanandroid_flutter](https://github.com/yechaoa/wanandroid_flutter...this.obscureText = false,//是否隐藏文本,即显示密码类型 this.autocorrect = true,//自动更正 this.maxLines =...以上就是图标的介绍,其实除了图标之外,对应的位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到的自定义计数器是一样的。...labelText,聚焦之后显示hintText,所以labelText是可以取代hintText的。

4K40

Flutter | 常用组件

,使用 FadeInImage 之后会在图片的加载过程显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter ,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...InputDecoration:用于控制 TextField 的外观显示提示文本,背景颜色,边框等 keyboardType :用于设置该输入框的键盘输入类型,取值如下: image.png...obscureText :是否隐藏正在编辑的文本输入密码等。...TextField( maxLength: 11, ), 设置最大长度计数器就可显示出来 自定义计数器/图标 TextField( autocorrect: true,...在请求接口之前会对输入框的数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个 Form 组件,他可以对 输入框进行分组,然后统一进行一些操作,内容校验

11.4K30

Flutter》-- 4.Flutter组件基础

FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕显示元素,而是一个描述显示元素的配置数据。...Flutter真正代表屏幕显示元素的类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...9)textTheme:文本主题设置。 10)primary:导航栏是否显示在任务栏顶部。 11)centerTitle:标题是否居中显示。 12)titleSpacing:标题的间距。...overflow属性用于表示文本的截断方式,取值有3种: TextOverflow.ellipsis:多余文本截断后以省略符表示; TextOverflow.clip:剪切多余文本,多余文本显示; TextOverflow.fade...decoration:用于控制TextField组件的外观显示提示文本、背景颜色和边框。 textAlign:输入框内文本在水平方向的对齐方式。 textDirection:输入框内文本的方向。

12.4K30

【老孟FlutterFlutter 2 新增的功能

为了使Flutter桌面达到这样的质量,从大小上进行了改进,从确保文本编辑像在每个受支持的平台上的本机体验一样开始,包括诸如文本选择枢轴点的基本功能以及能够进行文本编辑的能力。...此版本包括一个更新的Scrollbar小部件,该小部件在桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期的交互功能,包括拖动拇指,单击轨道以上下滚动页面以及在鼠标悬停在鼠标的任何部分显示轨道的功能...当我们接近Flutter桌面的第一个完整的生产质量版本,我们知道我们还有更多工作要做,包括对与本机顶级菜单集成的支持,更像各个平台的体验的文本编辑以及可访问性支持,以及常规的错误修复和性能增强。...图片发布 Flutter IDE扩展会在您的应用引发布局溢出异常发出通知 按下该按钮可将您带到出现问题的小部件的DevToolsFlutter Inspector,因此您可以对其进行修复。...现在,当您显示分辨率明显大于其显示尺寸的图像,该图像将上下颠倒显示,以便在您的应用轻松查找。

7.8K20

Flutter】自定义滚动开关

当此属性无效,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行的切换交互,该开关将滚动到具有动画效果的另一侧,并且在滚动该开关将更改图标和文本。...在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式的文本。...*我们将添加textOn是字符串' Yes '表示当开关打开文本显示在按钮;当textOff是字符串' No '意味着当开关关闭文本显示在按钮。...我们将添加colorOn表示,当开关处于打开状态,颜色将显示在按钮;当colorOff意味着当开关处于关闭状态,颜色将显示在按钮

33.3K60

Flutter 流体滑块

下面的演示视频显示了如何在颤动创建流畅的滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...它显示了具有不同颜色的三流体滑块,并为用户使用了不同的工作属性。它会显示在您的设备。 属性 onChanged: 此属性是必需的,并且在用户开始为滑块选择新值时调用该属性。...我们将显示“money-off”图标。如果未提供,则该min值显示文本。...我们将显示一个附着金钱图标。如果未提供,则该max值将显示文本。当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。 img 现在,我们将创建第三个“流体”滑块。...在此滑块,我们将在value方法添加一个变量,滑块颜色,onChanged,mapValueToString表示将双精度值映射到String文本的回调函数。

11.6K20

Flutter跨平台移动端开发丨Widget、Element、State、状态管理

一个 widget 通常由一些低级别的 widget 组成,flutter 框架依次的构建这些低级别的 widget,直到构建到最底层的子 widget ,它会计算并描述 widget 的几何形状 flutter...:flutter/cupertino.dart'; 基础 Widget Text:文本 Row:水平布局,基于 web Flexbox 布局模型。...---- Element widget 主要包含了组件的配置数据,但它并不代表最终绘制在屏幕显示元素,真正代表屏幕显示元素的是 element,widget 是 element 的配置数据,一个...widget 绘制 - build 使用热重载 I/flutter (28866): 热重载 - reassemble I/flutter (28866): widget 重构 - didUpdateWidget...I/flutter (28866): widget 绘制 - build 更改路由(移除当前 widget)后使用热重载 I/flutter (28866): 热重载 - reassemble I/

1.7K50

Flutter 密码锁定屏幕

在任何情况下,最新的Andriod先决条件所指出的那样,您需要在生物识别认证被破坏或受损的偶然机会上提供选择性的认证策略。 在在本文中,我们将探讨「Flutter」 的「密码锁定屏幕」。...我们将看到如何在flutter应用程序中使用「passcode_screen」软件包来实现演示程序密码锁定屏幕。...屏幕可适应颜色,大小,文本样式等。它将显示flutter应用程序中使用密码屏幕如何解锁屏幕。 该演示视频演示了如何在Flutter创建密码锁定屏幕。...它显示了如何在flutter应用程序中使用「passcode_screen」软件包来运行密码锁定屏幕。它显示密码输入屏幕以解锁屏幕。它会显示在您的设备。...我们将在按钮内添加填充,颜色,文本和onPressed方法,并在此方法添加**_showLockScreen()**小部件。当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。

4.9K30

Flutter Interact 的 Flutter 1.12 大进化和回顾

昨天谷歌为在 Flutter Interact 为我们带来了 Flutter 1.12 ,这是 1.9.x 的版本在经历 6 次 hotfix 之后,带来的 stable 大版本更新。...flutter create 补全),并且需要注意调试 MacOS 平台应用需要本地 Flutter SDK 要处于 master 分支,如果测试 Web 可以使用 beta 分支。...image 如下 GIF 所示,当选中的控件是具备 Flex 的支持,可以看到有 Layout Explorer 的面板,在面板可以动态调整控件的显示逻辑和控件的布局情况。 ?...image Flutter 过去的一年无疑是火热的,所以暴露的问题也指数级出现,比如最近开发中就遇到了在断网加载图后之后,再打开网络无法继续显示图片的问题。...不过既然是开源项目,“白嫖”之余也得多靠自己,上述问题经过查找后,在自定义的 ImageProvider 里图片加载失败,可以通过清除了 ImageCache 的 PendingImage 来解决问题

2.3K30

Flutter】滑动效果评价组件

Flutter」是Google的UI工具包,可通过一个代码库构建漂亮的,本机编译的移动,Web和桌面应用程序。 在在本博客,我们将探讨「Flutter」 的**Reviews Slider。...当用户点击微笑并向左或向右旋转或向左旋转,然后更改微笑形状。 该演示视频演示了如何在flutter中使用评论滑块。...它显示了使用「Flutter」应用程序的「reviews_slider」包,评论滑块将如何工作。当用户从左到右或从右到左旋转微笑并更改形状,它显示了一个具有变化的微笑的动画小部件。...它会显示在您的设备。 评论滑块的一些参数: **onChange:**此参数用于在指针更改滑块的值并且不再与屏幕接触触发。 **options:**此参数用于评论标题,例如好,差,好等。...另外,我们将添加文本selectedValue1.toString()。它将显示在设备

4.4K50

原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统Flutter的魅力!

MyApp通过MaterialApp这个Flutter App框架设置应用首页,即MyHomePage。...Widget Scaffold,是Material库提供的页面布局结构,包含: AppBar,页面导航栏,直接将MyHomePage的title属性作为标题使用 body,Text组件,显示了一个根据...图计数器示例的代码流程示意图,把这实例的整个代码流程串起: MyApp为Flutter应用的运行实例,在main函数调用runApp函数实现程序的入口。...对StatefulWidget,当数据改变,需重建Widget去更新界面,即Widget创建销毁会很频繁。...6 总结 先通过Flutter标准模板创建了计数器示例,并分析了Flutter的项目结构,以及Flutter工程与原生Android、iOS工程的联系,知道了Flutter代码是怎么运行在原生系统的。

35520

TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:6~11

“步骤 2”中所述,将其放置在其初始位置。 为了确保在初始化棋盘重新绘制 UI,我们将整个分配放在setState()。 屏幕启动后,板将被初始化。...生成输出并将其作为高分辨率图像显示给用户。 该模型缓存在设备,并且仅在开发人员更新模型更新,因此可以通过减少网络延迟来加快预测速度。 现在,让我们尝试更深入地了解 GAN。...如在图像捕捉的情况下,这可以是变型,例如当在路边的速度陷阱照相机触发特定传感器执行图像捕捉。 它也可以是常数。 例如,在配置为每x间隔拍照的相机。...在下一部分,我们将学习如何使用 Flutter 应用向服务器发出 POST 请求,并在屏幕显示服务器的响应。...以下各节讨论如何在 Windows,macOS 和 Linux 安装 Flutter SDK。

23K10

Flutter深入浅出获取帧率

因此 ,addTimesCallback(List)只有用户操作界面参数才有值。...CPU 负责计算显示内容,比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去,由 GPU 进行变换、合成、渲染。...之后 GPU 会把渲染结果提交到帧缓冲区去,等待下一次 VSync 信号到来时显示到屏幕。...FrameTiming 在帧的表示 当在应用操作时候,就会产生连续的帧,如图: 每两个柱形一起表示一帧:ui 表示 cpu 耗时,raster 表示 gpu 耗时。...输出: 代码,11 行是 ui 构建 + 栅格化时间,17 行是 totalSpan 时间, 22 行是 vsyncOverhead + ui 构建 + 栅格化时间 这个值最终和等于 totalSpan

4K120
领券