flutter pub add expandable_richtext基于插件公开信息、社区数据与项目使用情况整理的选型参考。
ExpandableRichText 是一个 Flutter 小部件，用于显示具有初始高度限制的文本，允许用户展开以查看完整内容。它支持富文本格式，并内置了对可点击 @提及 的处理，非常适合聊天界面或长篇内容预览。该小部件专为跨多个平台（包括移动设备、网页和桌面）的流畅用户体验而设计。它可无缝集成到卡片或展开式瓷砖中，适用于空间效率和交互性至关重要的场景。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A text widget that you can use to initially only show a defined number of lines of a probably long
text. It also supports clickable @mention, #hashtag, and hyperlinks. You can define styles
for @mention, #hashtag, and hyperlinks and apply custom styles on text segments.
expandText) and to Collapse text (collapseText)showEllipsis) is part of the Expand/Collapse textonExpandedChanged)
Add this to your package's pubspec.yaml file:
dependencies:
expandable_richtext: 1.0.7
Next, import the package into your dart code:
import 'package:expandable_rich_text/expandable_richtext.dart';
If text exceeds two lines:
Widget build(BuildContext context) {
return ExpandableRichText(
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
expandText: 'show more',
collapseText: 'show less',
maxLines: 2,
linkColor: Colors.blue,
);
}
If text have @mention, #hashtag, hyperlinks and text segments:
Widget build(BuildContext context) {
return ExpandableRichText(
"Lorem ipsum dolor sit amet..., #consetetur @sadipscing elitr, <tag1>I am Admin1</tag1> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <tag2>I am employee1</tag2> At vero eos et accusam et justo duo dolores et ea rebum Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum www.galley.com dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <tag1>I am Admin2</tag1> diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <tag2>I am employee2</tag2> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
expandText: 'show more',
collapseText: 'show less',
maxLines: 1,
linkColor: Colors.blue,
mentionStyle: const TextStyle(
color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),
hashtagStyle: const TextStyle(
fontSize: 16, color: Colors.white, backgroundColor: Colors.black87),
urlStyle: const TextStyle(
color: Colors.lightBlueAccent, decoration: TextDecoration.underline),
customTagStyle: const TextStyle(fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
fontSize: 16,
color: Colors.white,
backgroundColor: Colors.lightBlueAccent,
decoration: TextDecoration.underline)
);
}
Widget build(BuildContext context) {
return ExpandableRichText(
"Lorem ipsum dolor sit amet..., #consetetur @sadipscing elitr, <tag1>I am Admin1</tag1> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <tag2>I am employee1</tag2> At vero eos et accusam et justo duo dolores et ea rebum Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum www.galley.com dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <tag1>I am Admin2</tag1> diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <tag2>I am employee2</tag2> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
expandText: 'show more',
collapseText: 'show less',
expanded: false,
onExpandedChanged: (flag) => {},
toggleTextColor: Colors.black,
showEllipsis: true,
toggleTextStyle: const TextStyle(
fontSize: 12, color: Colors.blue, decoration: TextDecoration.underline),
urlStyle: const TextStyle(color: Colors.lightBlueAccent, decoration: TextDecoration.underline),
onUrlTap: (url) => {},
hashtagStyle: const TextStyle(
fontSize: 16, color: Colors.white, backgroundColor: Colors.black87),
mentionStyle: const TextStyle(
color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),
onMentionTap: (mention) => {},
customTagStyle: const TextStyle(fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
fontSize: 16,
color: Colors.white,
backgroundColor: Colors.lightBlueAccent,
decoration: TextDecoration.underline),
onCustomTagTap: (tag) => {},
expandOnTextTap: true,
collapseOnTextTap: true,
style: const TextStyle(color: Colors.black, fontSize: 24),
textDirection: TextDirection.ltr,
textAlign: TextAlign.start,
textScaleFactor: 1.0,
maxLines: 2,
animation: true,
animationDuration: const Duration(milliseconds: 200),
animationCurve: Curves.fastLinearToSlowEaseIn,
);
}
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Contributions, issues, and feature requests are welcome!
Give a star if this project helped you.
Code copyright 2023 DevCrew I/O. Code released under the MIT license.
暂无相关数据。