Flutter聊天界面之圖文混排


https://gitee.com/xiaoIos/expression_text

界面圖文混排思路和iOS是差不多的。一般是匹配表情,網址點擊,或者其他自定義圖片。

首先創建我們需要匹配的圖文混排正則表達式,這里只匹配網址和表情的。

判斷正則表達式是否在字符串中有匹配。如果有匹配,會得到一個正則的數組,遍歷這個數組,獲得匹配到的網址或者表情的位置。創建一個富文本數組,把文字,表情,網址添加進去,形成新的富文本 TextSpan。

這里分成幾種情況。匹配到的東西如表情。1.表情在首位,2.表情不在首位,3.是否是最后一個表情,並且后面是否有字符串。要獲得下標,才能進行字符串和表情的拼接形成一個新的富文本,

如1. 你好[表情]你好 2.[表情]你好

第一種情況,則把你好添加到富文本數組,然后再添加表情或者網址,同時把下標移動到表情后面,以此類推。如果是第三種情況,則需要把表情后面的文字添加進去。

有個注意點是,這里表情匹配為[我們的表情],要先判斷這個表情是否存在,如果存在在添加,不存在即顯示原來文字。

表情匹配的時候,我們需要把表情的頭和尾去掉,如【偷笑】= 偷笑。判斷圖片是否存在再添加。

匹配網址的時候,給網址添加上不同的顏色,和點擊事件,這樣就完成了我們的圖文混排界面內容。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM