Flutter實現(xiàn)簡單的內(nèi)容高亮效果
內(nèi)容高亮并不陌生,特別是在搜索內(nèi)容頁面,可以說四處可見,就拿掘金這個應(yīng)用而言,針對某一個關(guān)鍵字,我們搜索之后,與關(guān)鍵字相同的內(nèi)容,則會高亮展示,如下圖所示:
如上的效果,在Flutter當中,實現(xiàn)起來可以說是無比的簡單,畢竟原生的組件都給我們提供了,那就是富文本組件RichText。
針對今天的內(nèi)容,簡單的列一個大綱,主要內(nèi)容如下:
- 1、案例簡單效果
- 2、認識RichText
- 3、文本的高亮實現(xiàn)邏輯
- 4、高亮組件源碼
一、案例簡單效果
1、簡單的內(nèi)容高亮展示
2、列表形式內(nèi)容展示
二、認識RichText
要實現(xiàn)高亮效果,那么我們必須了解富文本組件RichText,話又說回來,什么是富文本呢?簡單來說,它是一種特殊的文本格式,比普通文本更加豐富多彩,可以包含各種字體、顏色、大小等元素,使文本更加生動、有趣,比如我們常見的閱讀協(xié)議等場景,均可采用富文本形式,這是原生的文本無法實現(xiàn)的效果。
初識構(gòu)造
構(gòu)造屬性需要注意的是,這里的text,和文本Text中的text是不一樣的,文本Text指的是字符串,這里的text指的是InlineSpan,當然了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 TextAlign.right TextAlign.cente TextAlign.justify TextAlign.start TextAlign.end |
textDirection | TextDirection | 文本的方向TextDirection.ltr TextDirection.rtl |
overflow | TextOverflow | 文字溢出的處理方式 TextOverflow.clip:剪切溢出的文本填滿容器。 TextOverflow.fade:將溢出的文本淡化為透明。 TextOverflow.ellipsis:使用省略號表示文本已溢出。 TextOverflow.visible:呈現(xiàn)容器外溢出的文本 |
maxLines | int | 最大行數(shù) |
textWidthBasis | TextWidthBasis | 文本的寬度TextWidthBasis.parentTextWidthBasis.longestLine |
TextSpan常見屬性
屬性 | 說明 |
---|---|
text | String類型的文本 |
children | 子組件 |
style | TextStyle類型的文本樣式可以設(shè)置文字的大小、顏色、樣式等 |
recognizer | 指定手勢交互 recognizer: TapGestureRecognizer()..onTap = () {},可以監(jiān)聽點擊事件 |
簡單案例
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)) ])
效果
當然了,除了上述寫法之外,也可以使用Text.rich來實現(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)) ]))
三、文本的高亮實現(xiàn)邏輯
RichText可以實現(xiàn)一個富文本展示,那么如何利用這個組件實現(xiàn)某個內(nèi)容高亮展示呢?首先,我們要明白,高亮的內(nèi)容是不固定的,一段內(nèi)容的每個字符都有可能會高亮,所以針對TextSpan,我們就需要動態(tài)的創(chuàng)建,然后動態(tài)的改變其樣式。
這里的動態(tài)也是十分的簡單,無非就是字符串的截取,分別是開頭、結(jié)尾、和中間三種情況進行截取,如下圖所示。
當然了,需要注意,有可能要搜索的這個內(nèi)容,在整個內(nèi)容中是多處存在的,這個時候,針對以上的邏輯,就需要遍歷循環(huán)了,直至找到最后一個搜索的內(nèi)容。
主要的邏輯如下
//搜索內(nèi)容為空 if (_searchContent == "") { return Text( _content, style: _ordinaryStyle, ); } List<TextSpan> richList = []; int start = 0; int end; //遍歷,進行多處高亮 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é)合列表組件或者單獨使用,當然了,有一些特殊需求,文字加大或者改變背景等需求,都可以進行擴展。
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}); @override Widget build(BuildContext context) { //搜索內(nèi)容為空 if (_searchContent == "") { return Text( _content, style: _ordinaryStyle, ); } List<TextSpan> richList = []; int start = 0; int end; //遍歷,進行多處高亮 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ù)制使用。
以上就是Flutter實現(xiàn)簡單的內(nèi)容高亮效果的詳細內(nèi)容,更多關(guān)于Flutter內(nèi)容高亮的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android實現(xiàn)將View保存成Bitmap的方法
這篇文章主要介紹了Android實現(xiàn)將View保存成Bitmap的方法,涉及Android畫布Canvas、位圖bitmap及View的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06Android?Jetpack庫重要組件WorkManager的使用
WorkManager是Android?Jetpack的一個強大的組件,用于處理后臺耗時任務(wù)。后臺任務(wù)可以是一次性的,也可以是重復(fù)的,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Android開發(fā)中在TableView上添加懸浮按鈕的方法
如果直接在TableVIewController上貼Button的話會導(dǎo)致這個會隨之滾動,下面通過本文給大家分享在TableView上實現(xiàn)位置固定懸浮按鈕的兩種方法,對tableview 懸浮按鈕感興趣的朋友一起學(xué)習(xí)吧2016-11-11Android 日常開發(fā)總結(jié)的60條技術(shù)經(jīng)驗
這篇文章主要介紹了Android日常開發(fā)總結(jié)的技術(shù)經(jīng)驗60條,需要的朋友可以參考下2016-03-03Android RetainFragment狀態(tài)保存的方法
本篇文章主要介紹了Android RetainFragment狀態(tài)保存的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02Android使用ViewPager實現(xiàn)圖片滑動預(yù)覽效果
這篇文章主要為大家詳細介紹了Android使用ViewPager實現(xiàn)圖片滑動預(yù)覽效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Android開發(fā)實現(xiàn)的簡單計算器功能【附完整demo源碼下載】
這篇文章主要介紹了Android開發(fā)實現(xiàn)的簡單計算器功能,結(jié)合實例形式分析了Android計算器的具體實現(xiàn)步驟與相關(guān)操作技巧,并附帶完整demo源碼供讀者下載參考,需要的朋友可以參考下2017-11-11