Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误

这篇具有很好参考价值的文章主要介绍了Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景

  1. 在发布文章的时候,有标题和内容,标题可为空,在没有标题的情况下,截取部分内容当作标题。
  2. 内容列表显示的时候,某些特殊的情况下(并不重要),我们就需要裁切文章标题。
  3. 当文章标题中有文字 + 系统自带的 emoji 的时候,我们去裁切标题就会出现无法识别渲染出来乱码的情况。

如下:
Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误,flutter

import 'package:flutter/material.dart';

class SubStringSystemIcon extends StatefulWidget {
  const SubStringSystemIcon({super.key});

  
  State<SubStringSystemIcon> createState() => _SubStringSystemIconState();
}

class _SubStringSystemIconState extends State<SubStringSystemIcon> {
  
  Widget build(BuildContext context) {
    const iconString = '🌾🍁🍂🌺';
    const textString = '系统表情';
    return Scaffold(
      appBar: AppBar(
        title: const Text('字符串截取系统表情包出现错误问题'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              textString + iconString.substring(0, 3),
            ),
          ],
        ),
      ),
    );
  }
}

分析/思考

寻找神马东西引起的渲染错误

思考(1)
遇到渲染错误的情况我第一时间想到的是这个emoji识别不出来,导致的显示出错。

tip:在 Flutter 输入框中以苹果的数字图标 1 2 3 4 5 6 7 8 9 0 为开头的内容,输入到输入框中就会导致后续的所有字符都无法识别。

想要了解的可以看这个 Flutter issues 11517

然后我测试了这个文章的标题完全显示出来的情况下,会不会出现这种情况。
Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误,flutter

class _SubStringSystemIconState extends State<SubStringSystemIcon> {
  
  Widget build(BuildContext context) {
    const iconString = '🌾🍁🍂🌺';
    const textString = '系统表情';
    return Scaffold(
      appBar: AppBar(
        title: const Text('字符串截取系统表情包出现错误问题'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(textString + iconString),
          ],
        ),
      ),
    );
  }
}

结果不是因为无法识别。在测试demo中显示全部标题是完全没有问题的,都可以显示。

思考(2)
全部显示没有问题,第一时间,我就想到了,是因为 substring 导致的错误。
我就试着打印出标题的全部长度后,一下子发现了问题的所在。
Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误,flutter

为什么 substring 之后就无法显示了

我们可以到我们打印的字符串的长度后会发现,每个 emoji 的长度是2
这样让我想到了,tips中提到的 issues,苹果的数字 emoji 长度是3
Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误,flutter

结论

一个emoji 的长度是2 或者 3,那么我们 substring 的时候,就会特殊情况下把emoji裁切了一半的情况。这样就会导致显示错误。

分析 substring

我们知道一个字符的长度是1,那么为什么emoji的字符长度不是1。
我试着打印出了他们的 unicode 发现了有意思的东西。
Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误,flutter
发现没有,emoji 是多个 unicode 的值组成(UTF-32格式)而 substring 裁切的的时候,识别每一个 unicode 值为一个字符。所以就出现了,某下情况下使用substring裁切带emoji的字符串的时候,就会出现渲染错误的问题。文章来源地址https://www.toymoban.com/news/detail-697560.html

到了这里,关于Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

    🌏 博客首页: 水香木鱼 📌 专栏收录:后台管理系统 📑 文章摘要: vue   typescript   vite 💌 木鱼寄语: 故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。 提示找不到模块问题 👇 解决方案: 在 src 目录下, vite-env.d.ts 文件内新增如下代码: 在 tsco

    2024年02月13日
    浏览(64)
  • U盘重装MAC OS遇到 无法识别文件系统和磁盘无法读取问题

    一台windows的电脑,一个差不多够大的U盘我这里差不多用了13G左右。 .dmg文件好难搞,不是难下,是下载转载后无法识别,所以很需要 带引导的os文件. 一个windows下dmg镜像恢复工具,这里用的是TransMac 10.4 ,没有注册码没事,有15天体验期。 1.插入U盘或其他存储设备 2.以管理员

    2024年02月21日
    浏览(37)
  • Xubuntu16.04系统中解决无法识别exFAT格式的U盘

    将exFAT格式的U盘插入到Xubuntu16.04系统中,发现系统可以识别到此U盘,但是打不开,查询后发现需要安装 exfat-utils 库才行。 1.设备有网络的情况下 直接安装 exfat-utils 库即可 2.设备无网络的情况下(需要拷贝相关的安装包到目标设备上进行安装) 首先在有网的设备上下载 exf

    2024年02月09日
    浏览(36)
  • 华硕ASUS:解决Win10重装系统后无法通过微软商店安装华硕管家的问题

    目录 1.问题 2.解决      今天重装了系统,重装了各种驱动后,发现屏幕亮度依然无法调节(Fn + F7 按了能出指示但是屏幕亮度没变),以及性能模式无法改变,得,肯定还是驱动问题。      于是我继续寻找华硕的各种驱动      第一个是华硕的官网      https://www.asus.co

    2024年02月14日
    浏览(53)
  • Flutter通过flutter_unity_widget嵌入Unity3D

    实现方案:采用flutter开源组件flutter_unity_widget 1、创建flutter项目flutter_unity_demo 2、在pubspec.paml文件dependencies添加flutter_unity_widget: ^2022.2.0,执行Pub get导入组件 3、在工程目录下创建unity文件夹 4、在unity目录下创建unity_demo的3D工程 5、下载flutter_unity_widget提供的unity插件 在unity_d

    2024年02月11日
    浏览(40)
  • ffmpeg 实用命令 -- 缩放与裁切

    缩放 缩放是一个常见的需求,这需要使用到 FFmpeg 提供的视频过滤器(或称视频滤镜,video filter),也即  -vf  参数。由于过滤器的使用过于复杂,在此也不会详细介绍;这里只是针对过滤器中的缩放器(scaler)功能进行说明。缩放器还有许多复杂的用法详情也可以参考官方

    2024年01月24日
    浏览(27)
  • flutter学习-day22-使用GestureDetector识别手势事件

    在 flutter 中,GestureDetector 是手势识别的组件,可以识别点击、双击、长按、拖动、缩放等手势事件,并且可以与子组件进行交互,构造函数属性如下: GestureDetector 内部封装了 Listener,用以识别语义化的手势。 当同时监听 onTap 和 onDoubleTap 事件时,当用户触发 tap 事件时,会

    2024年02月03日
    浏览(39)
  • 微信小程序 Canvas裁切案例

    源于 https://ask.csdn.net/questions/7797682 效果 输入 输出 环境 基础库版本 2.20.x使用的新版的canvas(也不算新两三年了)。 知识点 canvas base64转临时路径 代码 index.wxml index.wxss index.js 重点 代码没有进行封装,仅仅只是方便预览 源码 完整代码片段 https://developers.weixin.qq.com/s/ERW91Dma7QCP 私

    2024年02月09日
    浏览(35)
  • flutter 通过打包参数区分来 打内网 外网包

      内网 外网 env.dart 然后代码里面使用 EnvironmentConfig 做api 地址处理 最后执行不同打包shell 打不同环境的包

    2024年01月19日
    浏览(36)
  • Flutter 运行IOS真机,提示无法打开“iproxy”,因为无法验证开发者

    Flutter 运行IOS真机,提示无法打开“iproxy”。如下图: 在终端输入一下命令行 + flutter SDK路径(/Users/xxx/flutter/bin/cache/artifacts/usbmuxd/iproxy)  如:

    2024年02月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包