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

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

rf_expand_collapse_text 是一个可以展开和收起的 Text 组件，支持多种使用场景。

安装

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

dependencies:
  rf_expand_collapse_text: ^0.0.1

然后运行 flutter pub get 来安装该包。

演示 Demo

接口一览

以下是 RFExpandCollapseText 的定义：

class RFExpandCollapseText extends StatefulWidget {
  const RFExpandCollapseText({
    Key? key,
    required this.text,
    required this.textStyle,
    required this.expandStr,
    required this.collapseStr,
    required this.expandOrCollapseStyle,
    this.maxLines = 2,
    this.isExpanding,
    this.onChangeExpandStatus,
    this.isResponeAllText,
  }) : super(key: key);

  final String text;
  final TextStyle textStyle;
  final String expandStr;// 展开
  final String collapseStr;// 收起
  final TextStyle expandOrCollapseStyle;
  final int? maxLines;// 默认2行
  final bool? isExpanding; // 初始是否 展开还是收起
  final ValueChanged<bool>? onChangeExpandStatus;// 通知外面当前展开还是收起的状态
  final bool? isResponeAllText;// 是否所有文本都响应展开或收起操作

  @override
  State<RFExpandCollapseText> createState() => _RFExpandCollapseTextState();
}

如何使用

基本功能

基本用法，设置最大行数为2行：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: RFExpandCollapseText(
    text: "这是一段可以展开收起的文本。这是一段可以展开收起的文本。这是一段可以展开收起的文本。",
    textStyle: const TextStyle(color: Colors.black, fontSize: 18),
    expandStr: '展开',
    collapseStr: '收起',
    expandOrCollapseStyle: const TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 2,
  ),
)

自定义折行数

设置最大行数为3行：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: RFExpandCollapseText(
    text: "这是一段可以展开收起的文本。这是一段可以展开收起的文本。这是一段可以展开收起的文本。",
    textStyle: const TextStyle(color: Colors.black, fontSize: 18),
    expandStr: '展开',
    collapseStr: '收起',
    expandOrCollapseStyle: const TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 3,
  ),
)

自定义动作文字

自定义展开和收起的文字：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: RFExpandCollapseText(
    text: "这是一段可以展开收起的文本。这是一段可以展开收起的文本。这是一段可以展开收起的文本。",
    textStyle: const TextStyle(color: Colors.black, fontSize: 18),
    expandStr: 'show more',
    collapseStr: 'close more',
    expandOrCollapseStyle: const TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 2,
  ),
)

全局文字点击事件响应

使所有文本都响应展开或收起操作：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: RFExpandCollapseText(
    text: "这是一段可以展开收起的文本。这是一段可以展开收起的文本。这是一段可以展开收起的文本。",
    textStyle: const TextStyle(color: Colors.black, fontSize: 18),
    expandStr: '展开',
    collapseStr: '收起',
    expandOrCollapseStyle: const TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 2,
    isResponeAllText: true,
  ),
)

自定义展开状态

初始状态下展开或收起：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: RFExpandCollapseText(
    text: "这是一段可以展开收起的文本。这是一段可以展开收起的文本。这是一段可以展开收起的文本。",
    textStyle: const TextStyle(color: Colors.black, fontSize: 18),
    expandStr: '展开',
    collapseStr: '收起',
    expandOrCollapseStyle: const TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 2,
    isExpanding: false,
  ),
)

没有超出, 不需要折行

如果文本没有超出规定行数，则不需要展开收起功能：

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.grey[400],
  child: const RFExpandCollapseText(
    text: '没有超出规定行数, 不需要. 没有超出规定行数, 不需要这行展示',
    textStyle: TextStyle(color: Colors.black, fontSize: 18),
    expandStr: '展开',
    collapseStr: '收起',
    expandOrCollapseStyle: TextStyle(color: Colors.blue, fontSize: 18),
    maxLines: 2,
  ),
)

更多关于Flutter文本展开收缩插件rf_expand_collapse_text的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本展开收缩插件rf_expand_collapse_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


rf_expand_collapse_text 是一个用于在 Flutter 应用中实现文本展开和收缩功能的插件。它允许你显示一段长文本，并在用户点击时展开或收缩文本内容。以下是使用 rf_expand_collapse_text 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 rf_expand_collapse_text 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  rf_expand_collapse_text: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 rf_expand_collapse_text 包：

import 'package:rf_expand_collapse_text/rf_expand_collapse_text.dart';

3. 使用 RFExpandCollapseText

你可以在你的 UI 中使用 RFExpandCollapseText 组件来显示可展开和收缩的文本。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expand/Collapse Text Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RFExpandCollapseText(
            text: '这是一个很长的文本内容。默认情况下，它只会显示部分内容。点击“展开”按钮可以看到全部内容。点击“收缩”按钮可以再次隐藏部分内容。',
            maxLines: 2, // 默认显示的行数
            expandText: '展开', // 展开按钮的文本
            collapseText: '收缩', // 收缩按钮的文本
          ),
        ),
      ),
    );
  }
}

4. 自定义样式

你可以通过传递不同的参数来自定义 RFExpandCollapseText 的外观和行为。例如：

  • textStyle: 设置文本的样式。
  • buttonStyle: 设置展开/收缩按钮的样式。
  • buttonTextStyle: 设置展开/收缩按钮文本的样式。
  • expandText 和 collapseText: 设置展开和收缩按钮的文本。
RFExpandCollapseText(
  text: '这是一个很长的文本内容。默认情况下，它只会显示部分内容。点击“展开”按钮可以看到全部内容。点击“收缩”按钮可以再次隐藏部分内容。',
  maxLines: 2,
  expandText: '查看更多',
  collapseText: '收起',
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  buttonStyle: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  buttonTextStyle: TextStyle(color: Colors.white),
),
回到顶部