場景

1. 在發(fā)布文章的時候，有標題和內容，標題可為空，在沒有標題的情況下，截取部分內容當作標題。
2. 內容列表顯示的時候，某些特殊的情況下（并不重要），我們就需要裁切文章標題。
3. 當文章標題中有文字 + 系統(tǒng)自帶的 emoji 的時候，我們去裁切標題就會出現(xiàn)無法識別渲染出來亂碼的情況。

如下：

import 'package:flutter/material.dart';

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

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

class _SubStringSystemIconState extends State<SubStringSystemIcon> {
  @override
  Widget build(BuildContext context) {
    const iconString = '????????';
    const textString = '系統(tǒng)表情';
    return Scaffold(
      appBar: AppBar(
        title: const Text('字符串截取系統(tǒng)表情包出現(xiàn)錯誤問題'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              textString + iconString.substring(0, 3),
            ),
          ],
        ),
      ),
    );
  }
}

分析/思考

尋找神馬東西引起的渲染錯誤

思考（1）
遇到渲染錯誤的情況我第一時間想到的是這個emoji識別不出來，導致的顯示出錯。

tip：在 Flutter 輸入框中以蘋果的數(shù)字圖標 1 2 3 4 5 6 7 8 9 0 為開頭的內容，輸入到輸入框中就會導致后續(xù)的所有字符都無法識別。

想要了解的可以看這個 Flutter issues 11517

然后我測試了這個文章的標題完全顯示出來的情況下，會不會出現(xiàn)這種情況。

class _SubStringSystemIconState extends State<SubStringSystemIcon> {
  @override
  Widget build(BuildContext context) {
    const iconString = '????????';
    const textString = '系統(tǒng)表情';
    return Scaffold(
      appBar: AppBar(
        title: const Text('字符串截取系統(tǒng)表情包出現(xiàn)錯誤問題'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(textString + iconString),
          ],
        ),
      ),
    );
  }
}

結果不是因為無法識別。在測試demo中顯示全部標題是完全沒有問題的，都可以顯示。

思考（2）
全部顯示沒有問題，第一時間，我就想到了，是因為 substring 導致的錯誤。
我就試著打印出標題的全部長度后，一下子發(fā)現(xiàn)了問題的所在。

為什么 substring 之后就無法顯示了

我們可以到我們打印的字符串的長度后會發(fā)現(xiàn)，每個 emoji 的長度是2
這樣讓我想到了，tips中提到的 issues，蘋果的數(shù)字 emoji 長度是3

結論

一個emoji 的長度是2 或者 3，那么我們 substring 的時候，就會特殊情況下把emoji裁切了一半的情況。這樣就會導致顯示錯誤。

分析 substring

我們知道一個字符的長度是1，那么為什么emoji的字符長度不是1。
我試著打印出了他們的 unicode 發(fā)現(xiàn)了有意思的東西。

發(fā)現(xiàn)沒有，emoji 是多個 unicode 的值組成（UTF-32格式）而 substring 裁切的的時候，識別每一個 unicode 值為一個字符。所以就出現(xiàn)了，某下情況下使用substring裁切帶emoji的字符串的時候，就會出現(xiàn)渲染錯誤的問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-697560.html

到了這里，關于Flutter中系統(tǒng)Emoji通過substring裁切后無法識別導致渲染錯誤的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！