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.
暫無相關資料。