Flutter文本高亮插件highlight_text_plus的使用
Flutter文本高亮插件highlight_text_plus的使用
一个用于在文本中高亮关键词的Flutter插件。
使用
要使用此插件，需要在pubspec.yaml文件中添加highlight_text_plus作为依赖项。
入门
通过此插件，您可以高亮文本中的关键词，并为每个高亮的词创建特定的操作。您可以单独自定义每个词的样式，也可以为所有词创建统一的样式。此外，您还可以自定义非高亮部分的文本样式。
示例
导入库
首先，需要导入highlight_text_plus库：
import 'package:highlight_text_plus/highlight_text_plus.dart';
定义高亮词
使用HighlightedWord类来指定字典中的关键词。这些关键词将被高亮显示并可设置相应的动作：
// 定义关键词及其样式
Map<String, HighlightedWord> words = {
"Flutter": HighlightedWord(
onTap: () {
print("Flutter");
},
textStyle: textStyle,
),
"open-source": HighlightedWord(
onTap: () {
print("open-source");
},
textStyle: textStyle,
),
"Android": HighlightedWord(
onTap: () {
print("Android");
},
textStyle: textStyle,
),
};
使用TextHighlight组件
现在可以调用TextHighlight组件来展示高亮的文本：
TextHighlight(
text: text, // 需要高亮显示的字符串
words: words, // 关键词字典
textStyle: TextStyle( // 可以设置通用样式，如字体大小和颜色
fontSize: 20.0,
color: Colors.black,
),
textAlign: TextAlign.justify, // 可以使用RichText的所有属性
)
自定义样式
从1.1.0版本开始，您可以更好地自定义高亮的单词，就像使用Container一样。现在可以在HighlightedWord对象中添加decoration和padding字段，以便进行更多的自定义操作：
HighlightedWord(
onTap: () {},
textStyle: textStyle,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(50),
),
padding: EdgeInsets.all(8.0),
),
匹配大小写
从1.2.0版本开始，enableCaseSensitive参数已被重命名为matchCase，以更清晰地表达其功能。如果设置为true，则只会精确匹配字符串：
TextHighlight(
text: text,
words: words,
matchCase: true, // 将仅精确匹配字符串
)
更新至2.0.0
从2.0.0版本开始，textScaleFactor参数已更新为textScaler，以支持Flutter 3.16：
TextHighlight(
text: text,
words: words,
textScaler: TextScaler.linear(1.0), // 新的参数
)
示例代码
以下是一个完整的示例代码，展示了如何使用highlight_text_plus插件：
import 'package:flutter/material.dart';
import 'package:highlight_text_plus/highlight_text_plus.dart';
void main() {
runApp(MaterialApp(home: HomePage()));
}
class HomePage extends StatefulWidget {
[@override](/user/override)
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final String text =
"Flutter is an open-source mobile application development framework created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia.";
final EdgeInsetsGeometry padding = EdgeInsets.all(8.0);
final BoxDecoration decoration = BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(50),
);
final TextStyle textStyle = TextStyle(
color: Colors.red,
fontSize: 14.0,
);
late Map<String, HighlightedWord> words;
[@override](/user/override)
void initState() {
super.initState();
words = {
"flutter": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Flutter"),
content: Text(
"Flutter's engine, written primarily in C++, provides low-level rendering support using Google's Skia graphics library."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
decoration: decoration,
padding: padding,
),
"open-source": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("open-source"),
content: Text(
"Open-source software (OSS) is a type of computer software in which source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
),
"Android": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Android"),
content: Text(
"Android is a mobile operating system developed by Google."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
decoration: decoration,
padding: padding,
),
"iOS": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("iOS"),
content: Text(
"iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
),
"Fuchsia": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Fuchsia"),
content: Text(
"Fuchsia is a capability-based operating system currently being developed by Google."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
),
"goo": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Google"),
content: Text(
"Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple and Facebook."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
decoration: decoration,
padding: padding,
),
"development framework": HighlightedWord(
onTap: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("development framework"),
content: Text(
"Development frameworks are tools and libraries that other developers have created to either reach a particular technical goal or to make developing in a particular language easier."),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"),
)
],
);
});
},
textStyle: textStyle,
),
};
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text Highlight Example"),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: SafeArea(
child: Column(
children: <Widget>[
SizedBox(
height: 16.0,
),
TextHighlight(
text: text,
words: words,
matchCase: false,
textStyle: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
textAlign: TextAlign.justify,
),
],
),
),
),
);
}
}
更多关于Flutter文本高亮插件highlight_text_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter文本高亮插件highlight_text_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用highlight_text_plus插件来实现文本高亮的示例代码。highlight_text_plus是一个用于在Flutter应用中实现文本高亮显示的插件。
首先，确保你已经在pubspec.yaml文件中添加了highlight_text_plus依赖：
dependencies:
flutter:
sdk: flutter
highlight_text_plus: ^1.0.0 # 请使用最新版本号
然后运行flutter pub get来安装依赖。
接下来，在你的Flutter应用中，你可以按照以下步骤使用highlight_text_plus插件：
- 导入插件：
在你的Dart文件中导入highlight_text_plus：
import 'package:highlight_text_plus/highlight_text_plus.dart';
- 创建高亮文本：
下面是一个完整的示例，展示如何使用HighlightText小部件来高亮显示文本中的特定关键词：
import 'package:flutter/material.dart';
import 'package:highlight_text_plus/highlight_text_plus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Highlight Text Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Highlight Text Plus Example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: HighlightText(
text: 'This is a sample text with the keyword Flutter to highlight.',
terms: ['Flutter', 'highlight'],
textStyle: TextStyle(fontSize: 18),
termStyle: TextStyle(
color: Colors.red,
backgroundColor: Colors.yellow.withOpacity(0.5),
fontWeight: FontWeight.bold,
),
caseSensitive: false,
),
),
),
),
);
}
}
在这个示例中：
text参数是你想要显示的原始文本。terms参数是你想要高亮的关键词列表。textStyle参数是原始文本的样式。termStyle参数是高亮关键词的样式，这里设置了红色文字，黄色半透明背景，以及加粗字体。caseSensitive参数指定搜索关键词时是否区分大小写，这里设置为false表示不区分大小写。
- 运行应用：
保存所有文件并运行你的Flutter应用。你应该会看到文本中的关键词“Flutter”和“highlight”被高亮显示。
这个示例展示了如何使用highlight_text_plus插件来实现文本高亮的基本用法。根据你的需求，你可以进一步自定义样式和功能。
