可展开的富文本

pub package license

一个文本小部件，你可以用它来仅显示一段可能很长的文本的指定行数。它还支持可点击的 @提及、#话题标签和超链接。你可以为 @提及、#话题标签 和 超链接 定义样式，并对文本片段应用 自定义样式。

特点

  • 折叠和展开文本
  • 配置要显示的文本（expandText）和用于折叠文本（collapseText）
  • 控制省略号（showEllipsis）是否是展开/折叠文本的一部分
  • 展开和折叠动画
  • 展开状态更改事件的回调（onExpandedChanged）
  • 对 @提及、#话题标签、超链接和文本片段应用不同的样式
  • 处理 @提及、#话题标签、超链接和文本片段的点击事件
  • 以编程方式展开和折叠文本

Example with maxLines=1

入门

将此添加到您的包的pubspec.yaml文件中

dependencies:
  expandable_richtext: 1.0.2

接下来，将包导入到你的 dart 代码中

import 'package:expandable_rich_text/expandable_richtext.dart';

用法

如果 文本 超过两行

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,
  );
}

如果 文本 包含 @提及、#话题标签、超链接和文本片段

Widget build(BuildContext context) {
  return ExpandableRichText(
      text: "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(
    text: "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,
  );
}

Bug 和功能请求

有 bug 或功能请求？请先搜索现有和已关闭的 issue。如果你的问题或想法尚未得到解决，请提交一个新的 issue。

作者

DevCrew I/O

与我们联系

devcrew.io mycompany devcrew.io devcrew.io DevCrew-io

贡献

欢迎贡献、报告问题和功能请求！

表示您的支持

如果此项目对您有帮助，请给个 star。

版权和许可

代码版权所有 2023 DevCrew I/O。代码根据 MIT 许可证 发布。

GitHub

查看 Github