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

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

Read More Plus 插件是一个功能强大且易于使用的工具，旨在提高应用的可读性和用户体验。该插件提供了一个强大的“Read More”小部件，允许你在应用程序中创建可展开的部分，让用户更方便地访问额外内容，而不会感到信息过载。

平台支持

特性

• 自定义文本样式：轻松自定义“Read More”小部件的文本样式，以匹配你的应用风格。
• 最大行数控制：你可以定义在显示“Read More”链接之前要显示的最大行数，从而控制内容的可见性。
• 响应式设计：小部件会自动调整到不同的屏幕尺寸，确保所有用户都有良好的体验。
• 直观的用户体验：通过让用户根据需要展开或折叠应用的部分来提高用户参与度。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  read_more_plus: ^0.0.3

运行 flutter pub get 来安装包。

使用

在你的 Dart 代码中导入该包：

import 'package:read_more_plus/read_more_plus.dart';

在你的 widget 树中使用 ReadMore 小部件：

ReadMore(
    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. "
)

自定义

你可以根据需要自定义“ReadMore”小部件及其行为。你可以修改以下属性：

ReadMore(
  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.",
  maxLines: 3,
  readMoreTextColor: Colors.redAccent,
  expandedText: 'show less',
  collapsedText: 'show more',
  style: Theme.of(context).textTheme.labelLarge!.copyWith(
      color: Colors.deepPurple,
      fontSize: size.height*0.014
  ),
)

示例

有关如何使用此插件的完整示例，请参阅此存储库中的 example 文件夹。

示例代码

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:read_more_plus/read_more_plus.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Read More Example',
      debugShowCheckedModeBanner: false,

      /// 分配一个自定义的主题数据到项目
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
          textTheme: GoogleFonts.poppinsTextTheme()

          /// 导入 Poppins 文本主题到应用
          ),
      home: const MyHomePage(title: 'Read More Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 样本文本
  String 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. ";

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 获取可用屏幕大小
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(
              height: size.height * 0.02,
            ),
            SizedBox(
              width: size.width * 0.85,
              child: ReadMore(text: text),

              /// 使用 ReadMore 插件的默认小部件
            ),
            SizedBox(
              height: size.height * 0.02,
            ),
            SizedBox(
              width: size.width * 0.85,
              child: ReadMore(
                text: text,
                maxLines: 3,

                /// 设置行数为 3
                readMoreTextColor: Colors.redAccent,
                expandedText: 'show less',

                /// 更改折叠文本标签为“show less”
                collapsedText: 'show more',

                /// 更改“Read More”链接标签为“show more”
                /// 自定义文本外观
                style: Theme.of(context).textTheme.labelLarge!.copyWith(
                    color: Colors.deepPurple, fontSize: size.height * 0.014),
              ),
            ),
          ],
        ),
      ),
    );
  }
}