【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

这是【Flutter 问题系列第 80 篇】,如果觉得有用的话,欢迎关注专栏。

博文当前所用 Flutter SDK:3.10.5、Dart SDK:3.0.5

一:问题描述

在输入用户名称、简介等内容时,一般我们都会限制输入框内最大可输入数(通过 TextField 组件的 maxLength 属性),如下图限制简介最多10个字

在这里插入图片描述

正常输入汉字是没有问题的,我们的限制起到了作用。可当最后输入了一个表情符号时,我们获取输入内容的长度会超出限制,如下图所示

在这里插入图片描述

这肯定不是我们需要的,怎么处理这种情况呢?

二:解决方案

其实解决的话也很简单,不直接使用字符串的长度,而是使用字符串的字符长度,也就是字符串的 characters 属性的长度。

修改前

onChanged: (str) {if (str.length >= 10) {debugPrint("最多可输入10个字符");}// do something
},

修改后

onChanged: (str) {if (str.characters.length >= 10) {debugPrint("最多可输入10个字符");}// do something
},

修改后的效果如下图所示

在这里插入图片描述

String 内部用来存储的结果是一个 char 字符数组,Character 类用于对单个字符进行操作,是对 char 的封装。如果我们判断输入内容的长度是否大于限制的长度时,应该用的是字符长度,而不是字符串长度。

至此,关于 TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题便说到这里。

你的问题得到解决了吗?欢迎在评论区留言。

赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。


结束语

Google 的 Flutter 越来越火,截止 2024年1月17日 GitHub 标星已达 159K,Flutter 毅然是一种趋势,所以作为前端开发者,没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了,不妨先点个关注,后续我会将 Flutter 中的常用组件(含有源码分析、组件的用法及注意事项)以及可能遇到的问题写到 CSDN 博客中,希望自己学习的同时,也可以帮助更多的人。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/240930.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

011:vue结合css动画animation实现下雪效果

文章目录 1. 实现效果2. 编写一个下雪效果组件 VabSnow.vue3. 页面使用4. 注意点 1. 实现效果 GIF录屏文件太卡有点卡&#xff0c;实际是很丝滑的 2. 编写一个下雪效果组件 VabSnow.vue 在 src 下新建 components 文件&#xff0c;创建VabSnow.vue组件文件 <template>…

系分备考计算机网络传输介质、通信方式和交换方式

文章目录 1、概述2、传输介质3、网络通信4、网络交换5、总结 1、概述 计算机网路是系统分析师考试的常考知识点&#xff0c;本篇主要记录了知识点&#xff1a;网络传输介质、网络通信和数据交换方式等。 2、传输介质 网络的传输最常见的就是网线&#xff0c;也就是双绞线&…

k8s---ingress对外服务(ingress-controller)

ingress 概念 k8s的对外服务&#xff0c;ingress service作用现在两个方面&#xff1a; 1、集群内部&#xff1a;不断跟踪的变化&#xff0c;更新endpoint中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制。 2、集群外部&#xff1a;类似于负载均衡器&a…

球幕影院气膜:未来娱乐的奇妙之旅

球幕影院气膜&#xff1a;未来娱乐的奇妙之旅 在科技日新月异的时代&#xff0c;娱乐体验的创新与演变从未停歇。气膜球幕影院&#xff0c;作为一项领航未来的前沿科技&#xff0c;正以其沉浸感和颠覆性的观影体验&#xff0c;吸引着人们驻足体验。 创新科技的巅峰之作 气膜球幕…

ubuntu开放ssh服务

&#x1f4d1;前言 本文主要是【ubuntu】——ubuntu开放ssh服务的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力&#xff0c;这种新型感测器阵列方法可能优化感测器阵列…

【JaveWeb教程】(26) Mybatis基础操作(新增、修改、查询、删除) 详细代码示例讲解(最全面)

目录 1. Mybatis基础操作1.1 需求1.2 准备1.3 删除1.3.1 功能实现1.3.2 日志输入1.3.3 预编译SQL1.3.3.1 介绍1.3.3.2 SQL注入1.3.3.3 参数占位符 1.4 新增1.4.1 基本新增1.4.2 主键返回 1.5 更新1.6 查询1.6.1 根据ID查询1.6.2 数据封装1.6.3 条件查询1.6.4 参数名说明 1. Myb…

CHAPTER 9: 《DESIGN A WEB CRAWLER》第9章 《设计一个web爬虫》

CHAPTER 9: 《DESIGN A WEB CRAWLER》第九章 设计一个web爬虫 在本章中&#xff0c;我们将重点介绍网络爬虫设计&#xff1a;一种有趣而经典的系统设计 面试问题。 网络爬虫被称为机器人或蜘蛛。它被搜索引擎广泛用于发现网络上的新内容或更新内容。内容可以是网页、图像、视频…

scroll-view在小程序页面里实现滚动,uniapp项目

要实现红框中的区域进行滚动,scroll-view必须写高 <template><!-- 合同-待确认 --><view class"viewport"><!-- 上 --><view class"top-box"><!-- tab --><view class"tabs"><textv-for"(ite…

高精度AGV小车N/S极磁条导航传感器CNS-MGS-080N参数配置操作方法

高精度AGV小车N/S极磁条导航传感器CNS-MGS-080N主要运用于自主导航机器人、室内室外巡检机器人、自主导航运输车AGV(AGC)、自动手推车等自主导航设备&#xff0c;完成自主导航设备的预设运行路线检测及定位。基于预设磁轨迹的导航方式是自主移动平台如AGV、巡检机器人、无轨货架…

【物以类聚】给el-image预览多张图片增加提示文字,让每张图片有所分类

【物以类聚】给el-image预览多张图片增加提示文字&#xff0c;让每张图片有所分类 一、需求二、el-image三、实施步骤3.1 导包3.2 改造3.3 引入 三、效果 一、需求 点击地图上的一张图片&#xff0c;弹出所有相关的图片资源&#xff0c;图片资源上显示每个图片的所属类型。 二…

C++大学教程(第九版)5.19求Π的值

题目 代码 #include <bits/stdc.h> using namespace std;int main() {double pai 0;for (int count 1, i 1; count < 1000; i 2, count){int flag 1;if (count % 2 0){flag -1;}pai flag * (4.0 / (i * 1.0));cout << "当取前" << co…

开发实践6_project

要求&#xff1a; ① 页面写入超链接&#xff0c;获取所有数据item&#xff0c;显示在另一个页面&#xff0c;1min内&#xff0c;即使数据有变化&#xff0c;页面内容不变&#xff0c;1min后点击超链接可获取最新信息&#xff1b; ② 使用middleware完成用户请求路径判断 &am…

Mybatis面试题(一)

MyBatis 面试题 1、什么是 Mybatis&#xff1f; 1、Mybatis 是一个半 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它内部封装了 JDBC&#xff0c;开发时只需要关注 SQL 语句本身&#xff0c;不需要花费精力去处理加载驱动、创建连接、创建statement 等繁杂的过程…

C语言天花板——指针(经典题目)

指针我们已经学习的差不多了&#xff0c;今天我来给大家分享几个经典的题目&#xff0c;来让我们相互学习&#x1f3ce;️&#x1f3ce;️&#x1f3ce;️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…

Linux系统三剑客之grep和正则表达式的介绍(一)

1.正则表达式 目录 1.正则表达式 1.什么是正则表达式 &#xff1f; 2.正则表达式的使用场景 3.正则表达式字符表示 4.它们之间的区别 2.grep命令 作用&#xff1a; 语法&#xff1a; 说明&#xff1a; 选项&#xff1a;options 重点 实例 3.后面的下次再更新。 …

Notepad++运行C语言输出乱码

方法一&#xff1a;编码-编码字符集-中文-GB2312 这时原程序中文会变成乱码&#xff0c;我是重新输入中文 重新编译执行即可 缺陷&#xff1a;重开一个程序有中文还是会显示乱码&#xff0c;需要重新设置编码&#xff0c;比较麻烦 方法二&#xff1a;设置-首选项-新建-右侧编…

RH850P1X芯片学习笔记-Flash Memory

文章目录 FeaturesClock Supply Block DiagramFlash SizeMemory ConfigurationRegistersRegister Base AddressList of RegistersRegister Reset Condition 与Flash Memory相关的操作模式Functional OverviewOption BytesOPBT0 — Option Byte 0OPBT1 — Option Byte 1OPBT2 —…

设计模式 代理模式(静态代理 动态代理) 与 Spring Aop源码分析 具体是如何创建Aop代理的

代理模式 代理模式是一种结构型设计模式&#xff0c;它通过创建一个代理对象来控制对真实对象的访问。这种模式可以用于提供额外的功能操作&#xff0c;或者扩展目标对象的功能。 在代理模式中&#xff0c;代理对象与真实对象实现相同的接口&#xff0c;以便在任何地方都可以使…

TCP的三次握手,四次挥手

三次握手 第一次握手&#xff1a;客户端发送SYN报文&#xff0c;井发送seq为x序列号给服务端&#xff0c;等待服务端的确认第二次握手&#xff1a;服务端发送SYNACK报文&#xff0c;并发送seq为Y的序列号&#xff0c;在确认序列号为x1第三次握手&#xff1a;客户端发送ACK报文&…