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

这篇具有很好参考价值的文章主要介绍了【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后，输入的内容中包含表情符号时，获取输入的内容数还是会超出限制的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

一：问题描述

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

flutter textfield输入超出,获取输入框中字符的长度,TextField最大输入长度,Flutter输入框常见问题

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

flutter textfield输入超出,获取输入框中字符的长度,TextField最大输入长度,Flutter输入框常见问题

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

二：解决方案

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

修改前

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

修改后

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

修改后的效果如下图所示

flutter textfield输入超出,获取输入框中字符的长度,TextField最大输入长度,Flutter输入框常见问题

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

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

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

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。文章来源地址https://www.toymoban.com/news/detail-812573.html

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

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

到了这里，关于【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后，输入的内容中包含表情符号时，获取输入的内容数还是会超出限制的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！