Flutter文本折叠展开插件animated_read_more_text的使用

AnimatedReadMoreText

一个Flutter包，提供了一个可自定义的小部件，用于显示带有可选“阅读更多/收起”按钮的文本，增强了文本内容繁重的内容的用户体验。

概述

AnimatedReadMoreText小部件是一个Flutter包，它以用户友好和视觉上吸引人的方式呈现长文本内容。它根据预定义的最大行数动态调整文本长度，确保在各种屏幕尺寸上实现最佳可读性。该小部件的关键特性是其能够根据用户交互无缝扩展或折叠文本。此功能通过允许用户专注于特定文本部分而不被冗长段落所淹没来增强可读性。此外，小部件的微妙而有影响力的动画为用户界面增添了优雅的触感，进一步提升了整体阅读体验。

功能特性

• 轻量级且易于使用
• 显示具有指定最大行数的文本。
• 为“阅读更多”和“收起”按钮设置自定义标签，以匹配您的应用程序品牌并提升用户体验。
• 可自定义的外观和行为。
• 支持文本和按钮的可选样式。
• 平滑且可自定义的文本扩展和折叠动画。

使用方法

要使用此包，请将其包含在您的pubspec.yaml文件中：

dependencies:
  animated_read_more_text: ^0.0.6

在Dart文件中导入包：

import 'package:animated_read_more_text/animated_read_more_text.dart';

在Flutter应用程序中使用AnimatedReadMoreText小部件：

AnimatedReadMoreText(
  yourLongText,
  maxLines: 3,
  // 设置展开按钮的自定义文本，默认为“阅读更多”
  readMoreText: '展开',
  // 设置收起按钮的自定义文本，默认为“收起”
  readLessText: '收起',
  // 为主文本块设置自定义文本样式
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.red,
  ),
  // 为展开/收起按钮设置自定义文本样式
  buttonTextStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
)

设置自定义动画曲线和持续时间：

AnimatedReadMoreText(
  yourLongText,
  // 设置动画的曲线
  animationCurve: Curves.easeInOut,
  // 设置动画的持续时间
  animationDuration: Duration(milliseconds: 500),
)

示例代码

下面是一个完整的示例demo，展示了如何在Flutter应用程序中使用AnimatedReadMoreText小部件的不同用法：

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

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedReadMoreText Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              // 示例1：基本用法
              AnimatedReadMoreText(
                '这是一个简短的文本，因为它没有超过最大行数，所以会完整显示。',
              ),

              SizedBox(height: 16),

              // 示例2：长文本，带有自定义样式、自定义“阅读更多”和“收起”按钮文本，并禁用点击文本展开
              AnimatedReadMoreText(
                '这段文本超过了最大行数。文本将被截断，并出现一个“展开”按钮，替换默认的“阅读更多”按钮。文本和“展开”按钮都使用自定义字体大小和颜色进行样式化。文本为蓝色，字体大小为16.0，“展开”按钮为红色，字体大小为14.0。',
                maxLines: 3,
                readMoreText: '展开',
                readLessText: '收起',
                textStyle: TextStyle(fontSize: 16.0, color: Colors.blue),
                buttonTextStyle: TextStyle(fontSize: 14.0, color: Colors.red),
                expandOnTextTap: false,
              ),

              SizedBox(height: 16),

              // 示例3：点击文本展开
              AnimatedReadMoreText(
                '这个文本块设计得非常用户友好。通过点击文本的任何地方，而不仅仅是“阅读更多”按钮，都可以展开内容。此功能通过使整个文本块可交互来增强用户体验。它提供了一种直观的方式来访问额外的内容。因此，点击文本并发现更多信息吧！',
                expandOnTextTap: true,
              ),

              SizedBox(height: 16),

              // 示例4：不可收起的文本
              AnimatedReadMoreText(
                '这段文本可以展开，但不能收起。一旦点击“阅读更多”按钮，文本将以完整形式显示，并且不能再被截断。这在您希望确保用户一旦选择展开后能看到全部文本时非常有用。',
                allowCollapse: false,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是animated_read_more_text插件的详细使用说明及示例代码，希望能帮助到你！如果你有任何问题或建议，欢迎随时提出。