【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.mzph.cn/news/629333.shtml

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

相关文章

FFMPEG解码实时流,支持cpu、gpu解码

官网下载的ffmpeg目前只能下载到X64版本的库,具体编译请参考windows编译ffmpeg源码(32位库)_windows 32位ffmpeg动态库-CSDN博客 直接上代码 int VideoDecodeModule::Open(std::string strUrl) {AVFormatContext *pFormatCtx nullptr;AVCo…

电脑本地连接不见了怎么恢复?5个方法轻松解决问题!

“我在使用电脑时,突然发现我的本地连接不见了,这是怎么回事呢?有什么方法可以解决这个问题吗?” 电脑的本地连接是一种将电脑与局域网连接的方式。局域网是一种小型的网络,通常在建筑物内或地理位置相近的少量计算机之…

Python数据分析案例33——新闻文本主题多分类(Transformer, 组合模型) 模型保存

案例背景 对于海量的新闻,我们可能需要进行文本的分类。模型构建很重要,现在对于自然语言处理基本都是神经网络的方法了。 本次这里正好有一组质量特别高的新闻数据,涉及 教育 科技 社会 时政 财经 房产 家居 七大主题,基本涵盖…

Grafana(三)Grafana 免密登录-隐藏导航栏-主题变换

一. 免密登录 Grafana 的常用方式: 将配置好的Grafana图嵌入到系统页面中 为了实现可免登录访问,可以通过如下方式进行设置: 1. 修改Grafana配置文件 在Grafana的配置文件 /etc/grafana/grafana.ini 中,找到 [auth.anonymous] 配…

P9842 [ICPC2021 Nanjing R] Klee in Solitary Confinement 题解(SPJ!!!)

[ICPC2021 Nanjing R] Klee in Solitary Confinement 题面翻译 给定 n , k n,k n,k 和一个长为 n n n 的序列,你可以选择对区间 [ l , r ] [l, r] [l,r] 的数整体加上 k k k,也可以不加。最大化众数出现次数并输出。 题目描述 Since the travele…

MySQL命令大全和实例

文章目录 1. 数据库管理2. 表操作3. 数据操作(CRUD)4. 条件查询与排序5. 聚合函数和分组6. 用户权限管理7. 其他操作8. 视图操作9. 索引操作10. 子查询与连接查询11. 插入多行数据12. 删除满足特定条件的表中所有数据13. 清空表(保留表结构&a…

rust跟我学五:是否安装双系统

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎么得到检测双系统的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:[我的Ru…

IOS-高德地图路径绘制显示交通状况-Swift

本文基于:高德地图路径绘制进行了路径绘制的优化,添加了根据交通信息(是否拥堵)来显示路况,效果如图: 图标资源: custtexture_bad custtexture_green custtexture_slow custtexture_serio…

关于C语言整型提升的讲解

目录 1.什么是整型提升 2.整型提升的意义 3.整型提升是怎么提升的 4.整型提升的实例 1.什么是整型提升 C语言中的整型算术运算总是以缺省(默认)整型类型的精度来进行的。为了获得这个精度,表达式中的字符和短整型操作数在使用之前会被转换…

web练习2

需求 1.计算用户指定的数值内的奇数和。例如用户输入的是10则计算13579的和 <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>作业1</title></head> <body> <script>//计算用…

使用 Python 创造你自己的计算机游戏(游戏编程快速上手)第四版:第十五章到第十八章

十五、反转棋游戏 原文&#xff1a;inventwithpython.com/invent4thed/chapter15.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 在本章中&#xff0c;我们将制作反转棋&#xff0c;也称为黑白棋或奥赛罗。这个双人棋盘游戏是在网格上进行的&#xff0c;因此我们…

2024“华数杯”(A题)放射性 Tritium 污染问题国际大学生数学建模竞赛| 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍希望大家都能轻松建模呀&#xff0c;华数杯也会持续给大家放送思路滴~ 抓紧小秘籍&#xff0c;我们出发吧~ 完整内容可以在文章末尾领取&#xff01; 问题重述&#xff1a; 2024 “Huashu Cup” 国际数学建模大赛 - Proble…

机器学习平台建设(一)

一、概述 下图是较简化的机器学习平台架构&#xff0c;概括了机器学习平台的主要功能和流程。本章会进行简要介绍&#xff0c;在功能章节再展开详述。机器学习最主要的三个步骤可概括为&#xff1a;数据处理、建模以及部署。 数据处理&#xff0c;即所有和数据相关的工作&…

一种基于YOLO改进的高效且轻量级的表面缺陷检测网络, NEU-DET和GC10-DET涨点明显

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;一种基于YOLO改进的高效且轻量级的表面缺陷检测&#xff0c; 在NEU-DET和GC10-DET任务中涨点明显 目录 1.轻量且高效的YOLO 1.1 SCRB介绍 1.1.1 ScConv介绍 1.2 GSConvns 1.3 od_mobilenetv2_050 1.4 对应ya…

linux多进程基础(6):setitimer(间隔定时器)和signal(信号处理函数)

1.setitimer函数 setitimer函数用于设置一个间隔定时器,它会在指定的时间间隔到达时向进程发送一个信号。其定义如下: #include <sys/time.h> int setitimer(int which, const struct itimerval *new_value, struct itimerval *old_value); 该函数一共有三个参数,其…

2024年华数杯国际赛A题赛题

问题A&#xff1a;来自日本的放射性废水 背景 2011年3月&#xff0c;日本东海岸发生的地震引发了福岛第一核电站的事故。一场大规模海啸摧毁了该核电站的冷却系统&#xff0c;导致三个核反应堆熔毁&#xff0c;核燃料碎片熔化。为了冷却熔化的核燃料&#xff0c;海水不断地注入…

SQL性能分析手段

SQL执行频率 MySQL 客户端连接成功后&#xff0c;通过 show [session|global] status 命令可以提供整个服务器执行sql的状态信息。通过如下指令&#xff0c;可以查看当前数据库的INSERT、UPDATE、DELETE、SELECT的访问频次&#xff1a; -- session 是查看当前会话 ; -- globa…

uni-app引用矢量库图标

矢量库引用 导入黑色图标 1.生成连接&#xff0c;下载样式 2.导入项目&#xff08;字体样式&#xff09; 3.引入css样式 4.替换font-face 5.使用图标&#xff08;字体图标&#xff0c;只有黑色&#xff09; 导入彩色图标 1.安装插件 npm install -g iconfont-tools2.…

IDEA 在本地启动多个 SpringBoot 后端服务模拟集群

目录 方式一&#xff1a;使用 IDEA 界面在多个后端端口运行同一个项目 方式二&#xff1a;通过控制台在运行项目 jar 包时传入端口配置 方式一&#xff1a;使用 IDEA 界面在多个后端端口运行同一个项目 1. 点击 Run / Debug 在默认端口启动项目 2. 点击 Services&#xff0…

【CSDN博客系列】自定义模块

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…