上海自建站招聘杭州企業(yè)seo
內(nèi)容高亮并不陌生,特別是在搜索內(nèi)容頁面,可以說四處可見,就拿掘金這個(gè)應(yīng)用而言,針對某一個(gè)關(guān)鍵字,我們搜索之后,與關(guān)鍵字相同的內(nèi)容,則會(huì)高亮展示,如下圖所示:
如上的效果,在Flutter當(dāng)中,實(shí)現(xiàn)起來可以說是無比的簡單,畢竟原生的組件都給我們提供了,那就是富文本組件RichText。
針對今天的內(nèi)容,簡單的列一個(gè)大綱,主要內(nèi)容如下:
1、案例簡單效果
2、認(rèn)識RichText
3、文本的高亮實(shí)現(xiàn)邏輯
4、高亮組件源碼
一、案例簡單效果
1、簡單的內(nèi)容高亮展示
2、列表形式內(nèi)容展示
二、認(rèn)識RichText
要實(shí)現(xiàn)高亮效果,那么我們必須了解富文本組件RichText,話又說回來,什么是富文本呢?簡單來說,它是一種特殊的文本格式,比普通文本更加豐富多彩,可以包含各種字體、顏色、大小等元素,使文本更加生動(dòng)、有趣,比如我們常見的閱讀協(xié)議等場景,均可采用富文本形式,這是原生的文本無法實(shí)現(xiàn)的效果。
初識構(gòu)造
構(gòu)造屬性需要注意的是,這里的text,和文本Text中的text是不一樣的,文本Text指的是字符串,這里的text指的是InlineSpan,當(dāng)然了InlineSpan是抽象基類,一般我們使用TextSpan。
RichText({super.key,required this.text,this.textAlign = TextAlign.start,this.textDirection,this.softWrap = true,this.overflow = TextOverflow.clip,this.textScaleFactor = 1.0,this.maxLines,this.locale,this.strutStyle,this.textWidthBasis = TextWidthBasis.parent,this.textHeightBehavior,this.selectionRegistrar,this.selectionColor,}) : assert(text != null),assert(textAlign != null),assert(softWrap != null),assert(overflow != null),assert(textScaleFactor != null),assert(maxLines == null || maxLines > 0),assert(textWidthBasis != null),assert(selectionRegistrar == null || selectionColor != null),super(children: _extractChildren(text));
常見構(gòu)造屬性概述:
const TextSpan({this.text,this.children,super.style,this.recognizer,MouseCursor? mouseCursor,this.onEnter,this.onExit,this.semanticsLabel,this.locale,this.spellOut,}) : mouseCursor = mouseCursor ??(recognizer == null ? MouseCursor.defer : SystemMouseCursors.click),assert(!(text == null && semanticsLabel != null));
屬性 | 類型 | 概述 |
textAlign | TextAlign | 文本對齊方式 TextAlign.left |
textDirection | TextDirection | 文本的方向 TextDirection.ltr |
overflow | TextOverflow | 文字溢出的處理方式 |
maxLines | int | 最大行數(shù) |
textWidthBasis | TextWidthBasis | 文本的寬度 TextWidthBasis.parent TextWidthBasis.longestLine |
TextSpan常見屬性
屬性 | 說明 |
text | String類型的文本 |
children | 子組件 |
style | TextStyle類型的文本樣式可以設(shè)置文字的大小、顏色、樣式等 |
recognizer | 指定手勢交互 |
簡單案例:
RichText(text: const TextSpan(children: [TextSpan(text: "床前明月光,", style: TextStyle(color: Colors.black)),TextSpan(text: "疑是地上霜。", style: TextStyle(color: Colors.red)),TextSpan(text: "舉頭望明月,", style: TextStyle(color: Colors.blueAccent)),TextSpan(text: "低頭思故鄉(xiāng)。", style: TextStyle(color: Colors.tealAccent))])
效果:
當(dāng)然了,除了上述寫法之外,也可以使用Text.rich來實(shí)現(xiàn),代碼如下:
const Text.rich(TextSpan(children: [TextSpan(text: "床前明月光,", style: TextStyle(color: Colors.black)),TextSpan(text: "疑是地上霜。", style: TextStyle(color: Colors.red)),TextSpan(text: "舉頭望明月,", style: TextStyle(color: Colors.blueAccent)),TextSpan(text: "低頭思故鄉(xiāng)。", style: TextStyle(color: Colors.tealAccent))]))
三、文本的高亮實(shí)現(xiàn)邏輯
RichText可以實(shí)現(xiàn)一個(gè)富文本展示,那么如何利用這個(gè)組件實(shí)現(xiàn)某個(gè)內(nèi)容高亮展示呢?首先,我們要明白,高亮的內(nèi)容是不固定的,一段內(nèi)容的每個(gè)字符都有可能會(huì)高亮,所以針對TextSpan,我們就需要?jiǎng)討B(tài)的創(chuàng)建,然后動(dòng)態(tài)的改變其樣式。
這里的動(dòng)態(tài)也是十分的簡單,無非就是字符串的截取,分別是開頭、結(jié)尾、和中間三種情況進(jìn)行截取,如下圖所示。
當(dāng)然了,需要注意,有可能要搜索的這個(gè)內(nèi)容,在整個(gè)內(nèi)容中是多處存在的,這個(gè)時(shí)候,針對以上的邏輯,就需要遍歷循環(huán)了,直至找到最后一個(gè)搜索的內(nèi)容。
主要的邏輯如下:
//搜索內(nèi)容為空if (_searchContent == "") {return Text(_content,style: _ordinaryStyle,);}List<TextSpan> richList = [];int start = 0;int end;//遍歷,進(jìn)行多處高亮while ((end = _content.indexOf(_searchContent, start)) != -1) {//如果搜索內(nèi)容在開頭位置,直接高亮,此處不執(zhí)行if (end != 0) {richList.add(TextSpan(text: _content.substring(start, end), style: _ordinaryStyle));}//高亮內(nèi)容richList.add(TextSpan(text: _searchContent, style: _highlightStyle));//賦值索引start = end + _searchContent.length;}//搜索內(nèi)容只有在開頭或者中間位置,才執(zhí)行if (start != _content.length) {richList.add(TextSpan(text: _content.substring(start, _content.length),style: _ordinaryStyle));}return RichText(text: TextSpan(children: richList),);
四、高亮組件源碼
源碼很簡單,可以結(jié)合列表組件或者單獨(dú)使用,當(dāng)然了,有一些特殊需求,文字加大或者改變背景等需求,都可以進(jìn)行擴(kuò)展。
class TextHighlight extends StatelessWidget {final TextStyle _ordinaryStyle; //普通的樣式final TextStyle _highlightStyle; //高亮的樣式final String _content; //文本內(nèi)容final String _searchContent; //搜索的內(nèi)容const TextHighlight(this._content, this._searchContent, this._ordinaryStyle,this._highlightStyle,{super.key});@overrideWidget build(BuildContext context) {//搜索內(nèi)容為空if (_searchContent == "") {return Text(_content,style: _ordinaryStyle,);}List<TextSpan> richList = [];int start = 0;int end;//遍歷,進(jìn)行多處高亮while ((end = _content.indexOf(_searchContent, start)) != -1) {//如果搜索內(nèi)容在開頭位置,直接高亮,此處不執(zhí)行if (end != 0) {richList.add(TextSpan(text: _content.substring(start, end), style: _ordinaryStyle));}//高亮內(nèi)容richList.add(TextSpan(text: _searchContent, style: _highlightStyle));//賦值索引start = end + _searchContent.length;}//搜索內(nèi)容只有在開頭或者中間位置,才執(zhí)行if (start != _content.length) {richList.add(TextSpan(text: _content.substring(start, _content.length),style: _ordinaryStyle));}return RichText(text: TextSpan(children: richList),);}
}
案例Demo很是簡單,上邊是搜索框,下面是展示的內(nèi)容,這里就不貼了,高亮組件已經(jīng)給大家提供了,大家可以直接復(fù)制使用。