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

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

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

一：问题描述

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

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

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

二：解决方案

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

修改前

csharp 复制代码

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

修改后

csharp 复制代码

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 博客中，希望自己学习的同时，也可以帮助更多的人。