Flutter自定义富文本插件custom_rich_text的使用
Flutter自定义富文本插件custom_rich_text的使用
Custom RichText 插件简介
CustomRichText 是一个Flutter插件，允许对文本进行高亮显示和链接引用。它支持高亮显示电子邮件、电话号码、网页链接、自定义正则表达式以及特定的子字符串，并为每个高亮的字符串提供回调函数。此外，还提供了“查看更多”和“收起”功能及其回调。
主要特性
- 高亮显示电子邮件、电话号码、网页链接、自定义正则表达式以及特定的子字符串。
- 为每个高亮的字符串提供回调函数。
- 提供“查看更多”和“收起”功能及其回调。
- 允许根据需求自定义文本样式。
注意事项
- 如果需要高亮显示特定类型的文本，则需要添加相应的点击方法。
- 如果提供的子字符串包含在链接或电子邮件中，则会忽略该子字符串并将其作为网页链接或电子邮件进行高亮显示。
使用步骤
1. 添加依赖
在 pubspec.yaml 文件中添加 custom_rich_text 依赖：
dependencies:
...
custom_rich_text: any
2. 导入包
在Dart代码中导入 custom_rich_text 包：
import 'package:custom_rich_text/custom_rich_text.dart';
3. 示例代码
以下是一个完整的示例代码，展示了如何使用 CustomRichText 插件来创建一个带有高亮显示和链接的富文本组件。
import 'package:custom_rich_text/custom_rich_text.dart';
import 'package:custom_rich_text/models/read_more_less_model.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage();
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isSelected = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
// 背景容器
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
// 顶部图片
Positioned(
top: 0.0,
height: 350,
width: MediaQuery.of(context).size.width,
child: Container(
color: Colors.black,
padding: EdgeInsets.only(bottom: 60),
child: Image.asset(
'assets/images/detail_image.png', // 替换为你的图片路径
fit: BoxFit.fill,
),
),
),
// 内容区域
Positioned(
top: 280,
width: MediaQuery.of(context).size.width,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题
Text(
'MindInventory',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: Colors.black),
),
// 副标题
Padding(
padding: EdgeInsets.only(top: 5.0, bottom: 18.0),
child: Text(
'UI Design & Web, Mobile App Development Company',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.w500)),
),
// 内容标题
Text(
'Details',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(height: 10),
// 自定义富文本
CustomRichText(
text: 'MindInventory is first-rate choice of the '
'clients worldwide. With sheer customer satisfaction in mind, we are profoundly '
'dedicated to developing highly intriguing apps that strictly meet the business '
'requirements and catering a wide spectrum of projects. Kickstart Your Digital '
'Journey Today and get all your queries and concerns answered by our business '
'development team. Our email address is sales@mindinventory.com, our website '
'https://www.mindinventory.com and our Contact number is +91-951-229-3490',
caseSensitive: false,
readMoreLessModel: ReadMoreLessModel(
trimLines: 2, // 设置展开前显示的行数
readMoreText: ' read more', // 展开按钮文本
readLessText: ' read less', // 收起按钮文本
readMoreLessStyle: TextStyle(
color: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500),
),
textStyle: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w400),
linkStyle: TextStyle(
fontSize: 16,
color: Colors.blue,
fontWeight: FontWeight.w500,
decoration: TextDecoration.underline),
highlightTermsStyle: TextStyle(
fontSize: 16,
color: Colors.red,
fontWeight: FontWeight.w500,
decoration: TextDecoration.underline),
onWebLinkTap: (web) async {
// 点击网页链接时的回调
await launch(web);
},
onPhoneTap: (phone) async {
// 点击电话号码时的回调
await launch('tel:$phone');
},
onEmailTap: (email) async {
// 点击电子邮件时的回调
await launch('mailto:$email');
},
highlightTerms: ['MindInventory'], // 需要高亮的特定词语
onTermTap: (text) async {
// 点击高亮词语时的回调
await launch('https://www.mindinventory.com/');
},
),
],
),
),
),
),
// 右上角图标
Positioned(
top: 44,
right: 20,
child: Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Image.asset(
'assets/images/liked_icon.png', // 替换为你的图片路径
),
),
),
],
),
);
}
void showSnackBar(String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.white,
content: Text(
'$message has been clicked',
style: TextStyle(
color: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500),
),
),
);
}
}
更多关于Flutter自定义富文本插件custom_rich_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义富文本插件custom_rich_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用custom_rich_text插件来创建自定义富文本的示例代码。custom_rich_text插件允许你以灵活的方式创建和显示富文本内容。
首先，你需要在你的pubspec.yaml文件中添加对custom_rich_text插件的依赖：
dependencies:
flutter:
sdk: flutter
custom_rich_text: ^x.y.z # 请将x.y.z替换为最新版本号
然后，运行flutter pub get来获取依赖。
接下来，是一个使用custom_rich_text插件的完整示例：
import 'package:flutter/material.dart';
import 'package:custom_rich_text/custom_rich_text.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Rich Text Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 定义一个富文本内容
final richText = CustomRichText(
text: [
{
"text": "Hello, ",
"style": TextStyle(fontSize: 20, color: Colors.black),
},
{
"text": "World!",
"style": TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
"gestures": [
{
"type": "onTap",
"handler": () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('World tapped!')),
);
},
},
],
},
{
"text": "\nThis is a ",
"style": TextStyle(fontSize: 18, color: Colors.grey),
},
{
"text": "link",
"style": TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
"gestures": [
{
"type": "onTap",
"handler": () {
// 打开链接或执行其他操作
print("Link tapped!");
},
},
],
},
{
"text": ".",
"style": TextStyle(fontSize: 18, color: Colors.grey),
},
],
);
return Scaffold(
appBar: AppBar(
title: Text('Flutter Custom Rich Text Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: richText,
),
);
}
}
在这个示例中，我们创建了一个包含多个文本段落的富文本内容。每个段落都有一个text字段用于定义文本内容，一个style字段用于定义文本样式，以及一个可选的gestures字段用于定义文本上的手势（例如点击事件）。
解释
- 依赖添加：在
pubspec.yaml文件中添加custom_rich_text依赖。 - 导入插件：在代码文件中导入
custom_rich_text插件。 - 定义富文本内容：使用
CustomRichText的text参数来定义富文本内容，它是一个包含多个段落的列表。 - 段落定义：每个段落是一个包含
text、style和可选的gestures的字典。 - 手势处理：通过
gestures字段定义文本上的手势，例如点击事件。
这个示例展示了如何使用custom_rich_text插件来创建自定义富文本内容，并处理文本上的点击事件。你可以根据实际需求进一步扩展和修改这个示例。
