Flutter實(shí)現(xiàn)簡(jiǎn)單的內(nèi)容高亮效果
內(nèi)容高亮并不陌生，特別是在搜索內(nèi)容頁(yè)面，可以說(shuō)四處可見(jiàn)，就拿掘金這個(gè)應(yīng)用而言，針對(duì)某一個(gè)關(guān)鍵字，我們搜索之后，與關(guān)鍵字相同的內(nèi)容，則會(huì)高亮展示，如下圖所示：
如上的效果，在Flutter當(dāng)中，實(shí)現(xiàn)起來(lái)可以說(shuō)是無(wú)比的簡(jiǎn)單，畢竟原生的組件都給我們提供了，那就是富文本組件RichText。
針對(duì)今天的內(nèi)容，簡(jiǎn)單的列一個(gè)大綱，主要內(nèi)容如下：
- 1、案例簡(jiǎn)單效果
- 2、認(rèn)識(shí)RichText
- 3、文本的高亮實(shí)現(xiàn)邏輯
- 4、高亮組件源碼
一、案例簡(jiǎn)單效果
1、簡(jiǎn)單的內(nèi)容高亮展示
2、列表形式內(nèi)容展示
二、認(rèn)識(shí)RichText
要實(shí)現(xiàn)高亮效果，那么我們必須了解富文本組件RichText，話又說(shuō)回來(lái)，什么是富文本呢？簡(jiǎn)單來(lái)說(shuō)，它是一種特殊的文本格式，比普通文本更加豐富多彩，可以包含各種字體、顏色、大小等元素，使文本更加生動(dòng)、有趣，比如我們常見(jiàn)的閱讀協(xié)議等場(chǎng)景，均可采用富文本形式，這是原生的文本無(wú)法實(shí)現(xiàn)的效果。
初識(shí)構(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));常見(jiàn)構(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 | 文本對(duì)齊方式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：使用省略號(hào)表示文本已溢出。 TextOverflow.visible：呈現(xiàn)容器外溢出的文本 |
| maxLines | int | 最大行數(shù) |
| textWidthBasis | TextWidthBasis | 文本的寬度TextWidthBasis.parentTextWidthBasis.longestLine |
TextSpan常見(jiàn)屬性
| 屬性 | 說(shuō)明 |
|---|---|
| text | String類型的文本 |
| children | 子組件 |
| style | TextStyle類型的文本樣式可以設(shè)置文字的大小、顏色、樣式等 |
| recognizer | 指定手勢(shì)交互 recognizer: TapGestureRecognizer()..onTap = () {},可以監(jiān)聽(tīng)點(diǎn)擊事件 |
簡(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))
])效果
當(dāng)然了，除了上述寫(xiě)法之外，也可以使用Text.rich來(lái)實(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ì)高亮，所以針對(duì)TextSpan，我們就需要?jiǎng)討B(tài)的創(chuàng)建，然后動(dòng)態(tài)的改變其樣式。
這里的動(dòng)態(tài)也是十分的簡(jiǎn)單，無(wú)非就是字符串的截取，分別是開(kāi)頭、結(jié)尾、和中間三種情況進(jìn)行截取，如下圖所示。
當(dāng)然了，需要注意，有可能要搜索的這個(gè)內(nèi)容，在整個(gè)內(nèi)容中是多處存在的，這個(gè)時(shí)候，針對(duì)以上的邏輯，就需要遍歷循環(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)容在開(kā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)容只有在開(kāi)頭或者中間位置，才執(zhí)行
if (start != _content.length) {
richList.add(TextSpan(
text: _content.substring(start, _content.length),
style: _ordinaryStyle));
}
return RichText(
text: TextSpan(children: richList),
);四、高亮組件源碼
源碼很簡(jiǎn)單，可以結(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});
@override
Widget 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)容在開(kā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)容只有在開(kāi)頭或者中間位置，才執(zhí)行
if (start != _content.length) {
richList.add(TextSpan(
text: _content.substring(start, _content.length),
style: _ordinaryStyle));
}
return RichText(
text: TextSpan(children: richList),
);
}
}案例Demo很是簡(jiǎn)單，上邊是搜索框，下面是展示的內(nèi)容，這里就不貼了，高亮組件已經(jīng)給大家提供了，大家可以直接復(fù)制使用。
以上就是Flutter實(shí)現(xiàn)簡(jiǎn)單的內(nèi)容高亮效果的詳細(xì)內(nèi)容，更多關(guān)于Flutter內(nèi)容高亮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android網(wǎng)絡(luò)狀態(tài)實(shí)時(shí)監(jiān)聽(tīng)實(shí)例代碼(二)
這篇文章主要介紹了Android網(wǎng)絡(luò)狀態(tài)實(shí)時(shí)監(jiān)聽(tīng)實(shí)例代碼(2)的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)商品展示效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Flutter?SystemChrome控制應(yīng)用程序的系統(tǒng)級(jí)別行為
這篇文章主要為大家介紹了Flutter?SystemChrome用來(lái)控制應(yīng)用程序的系統(tǒng)級(jí)別行為步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了淺談Android 指紋解鎖技術(shù),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
如何使用Mock修改Android設(shè)備上的features
這篇文章主要介紹了如何使用Mock修改Android設(shè)備上的features，想了解Mock的同學(xué)可以參考下2021-04-04
通常Flutter與Android頁(yè)面交互是各自獨(dú)占整個(gè)手機(jī)屏幕，但有些情況下無(wú)法滿足需求，有些時(shí)候Flutter中沒(méi)有提供相關(guān)插件或者插件不滿足需求，這時(shí)候就需要開(kāi)發(fā)者自定義插件，開(kāi)發(fā)者可以參考本文中的方法去進(jìn)行自定義。2021-06-06
Android使用個(gè)推實(shí)現(xiàn)三方應(yīng)用的推送功能
這篇文章主要為大家詳細(xì)介紹了Android使用個(gè)推實(shí)現(xiàn)三方應(yīng)用的推送功能，感興趣的小伙伴們可以參考一下2016-08-08
mui.init()與mui.plusReady()區(qū)別和關(guān)系
給大家分享一下在使用MUI進(jìn)行APP開(kāi)發(fā)的時(shí)候，mui.init()與mui.plusReady()區(qū)別以及使用上不同之處。2017-11-11
Kotlin中Stack與LinkedList的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于Kotlin中Stack與LinkedList實(shí)現(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
Android 簡(jiǎn)單的照相機(jī)程序的實(shí)例代碼
終于經(jīng)過(guò)多次找錯(cuò)，修改把一個(gè)簡(jiǎn)單的照相機(jī)程序完成了，照相類代碼如下：2013-05-05