Flutter文本展开收缩插件expandable_text的使用

Flutter插件expandable_text提供了一个名为ExpandableText的小部件，它允许我们仅在最初显示一段可能较长的文字的指定行数。该小部件会附加一个可配置的文字链接，用户可以通过点击这个链接来展开或收起完整的文字内容。

开始使用

添加依赖

首先，在你的项目的pubspec.yaml文件中添加expandable_text作为依赖项：

dependencies:
  expandable_text: ^2.3.0

然后运行flutter pub get以安装此包。

导入库

接下来，在Dart代码中导入expandable_text库：

import 'package:expandable_text/expandable_text.dart';

使用方法

下面是一个简单的例子，展示了如何创建一个当longText超过一行时可以展开和收缩的文本。

Widget build(BuildContext context) {
    return ExpandableText(
        longText,
        expandText: 'show more',
        collapseText: 'show less',
        maxLines: 1,
        linkColor: Colors.blue,
    );
}

高级示例

在这个更复杂的例子中，我们展示了一条由用户发布的信息(message)，其中用户名始终可见，并且点击它可以打开用户的个人资料页面。文本在两行后被截断，用户可以通过点击“显示更多”链接或直接点击文本本身来展开它。由于没有提供collapseText，因此一旦文本被展开，它就不能再被折叠。此外，文本中的URL、@提及和#话题都进行了特殊样式处理并可点击。

Widget build(BuildContext context) {
    return ExpandableText(
        message,
        expandText: 'show more',
        maxLines: 2,
        linkColor: Colors.blue,
        animation: true,
        collapseOnTextTap: true,
        prefixText: username,
        onPrefixTap: () => showProfile(username),
        prefixStyle: TextStyle(fontWeight: FontWeight.bold),
        onHashtagTap: (name) => showHashtag(name),
        hashtagStyle: TextStyle(
            color: Color(0xFF30B6F9),
        ),
        onMentionTap: (username) => showProfile(username),
        mentionStyle: TextStyle(
            fontWeight: FontWeight.w600,
        ),
        onUrlTap: (url) => launchUrl(url),
        urlStyle: TextStyle(
            decoration: TextDecoration.underline,
        ),
    );
}

特性

• 展开链接 (expandText)：用于展开折叠文本的链接。
• 动画效果 (animation, animationDuration, animationCurve)：为展开和折叠操作添加动画。
• 可选的折叠链接 (collapseText)：用于将已展开的文本再次折叠起来。
• 链接样式配置 (linkStyle / linkColor)：自定义链接样式。
• 是否将省略号包含在链接中 (linkEllipsis)。
• 前缀文本 (prefixText, prefixStyle, onPrefixTap)：带有样式的前缀文本及其点击回调。
• 可点击并带有样式的链接 (onUrlTap, urlStyle)。
• 可点击并带有样式的@提及 (onMentionTap, mentionStyle)。
• 可点击并带有样式的#话题 (onHashtagTap, hashtagStyle)。
• 设置折叠状态下的最大行数 (maxLines)。
• 控制默认展开状态 (expanded, onLinkTap)。
• 展开变化事件的回调 (onExpandedChanged)。
• 通过点击文本进行展开或折叠 (expandOnTextTap, collapseOnTextTap)。

示例应用

以下是一个完整的示例应用程序，它演示了expandable_text插件的基本用法：

import 'package:expandable_text/expandable_text.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable Text'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ExpandableText(
              'Short text',
              expandText: 'show more',
              collapseText: 'show less',
            ),
            SizedBox(height: 10.0),
            ExpandableText(
              '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. 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. 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. 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,
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这段代码创建了一个包含两个ExpandableText组件的应用程序界面，第一个是简短的文本，第二个是长文本，后者设置了最大显示行为（如只显示一行），并且提供了"显示更多"和"显示较少"的选项。

总结

expandable_text是一个非常实用的Flutter插件，它使得开发者能够轻松实现文本内容的动态展示与交互，特别是在处理长段落或者需要节省屏幕空间的情况下。希望这篇文章可以帮助你更好地理解和使用这个插件！如果你有任何问题或建议，请随时提出。