Flutter文本展开收起插件 show_more_text_popup 的使用

简介

flutter_show_more_text_popup 是一个 Flutter 插件，用于在弹出窗口或覆盖容器中显示文本。这对于长文本的展示非常有用，可以在用户点击“显示更多”时弹出一个包含完整文本的窗口。

安装

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

dependencies:
  ...
  show_more_text_popup: ^latest-version

使用

首先，导入 show_more_text_popup.dart：

import 'package:show_more_text_popup/show_more_text_popup.dart';

然后，你可以使用 ShowMoreTextPopup 类来创建和显示弹出窗口。以下是一个完整的示例代码：

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Show more text',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final String description =
      "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.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo Show More"),
      ),
      body: Container(
        child: DescriptionTextWidget(text: description),
      ),
    );
  }
}

class DescriptionTextWidget extends StatefulWidget {
  final String text;

  DescriptionTextWidget({@required this.text});

  @override
  _DescriptionTextWidgetState createState() => _DescriptionTextWidgetState();
}

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  String firstHalf;
  String secondHalf;
  GlobalKey key = GlobalKey();
  bool flag = true;

  @override
  void initState() {
    super.initState();

    if (widget.text.length > 40) {
      firstHalf = widget.text.substring(0, 40);
      secondHalf = widget.text.substring(40, widget.text.length);
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      child: secondHalf.isEmpty
          ? Text(firstHalf)
          : Row(
              children: [
                Text(firstHalf + " "),
                InkWell(
                  key: Key("show_more_ink_well"),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Text(
                        "show more",
                        key: key,
                        style: TextStyle(color: Colors.blue),
                      ),
                    ],
                  ),
                  onTap: () {
                    showMoreText(widget.text);
                  },
                ),
              ],
            ),
    );
  }

  void showMoreText(String text) {
    ShowMoreTextPopup popup = ShowMoreTextPopup(context,
        text: text,
        textStyle: TextStyle(color: Colors.black),
        height: 200,
        width: 100,
        backgroundColor: Color(0xFF16CCCC),
        padding: EdgeInsets.all(4.0),
        borderRadius: BorderRadius.circular(10.0),
        onDismiss: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Dismiss callback!")));
        });

    /// 显示弹出窗口
    popup.show(
      widgetKey: key,
    );
  }
}

截图

说明

• 安装：在 pubspec.yaml 中添加依赖。
• 使用：导入库并使用 ShowMoreTextPopup 类来创建和显示弹出窗口。
• 示例代码：展示了如何在应用中使用 ShowMoreTextPopup 来实现文本的展开和收起功能。

希望这个插件能帮助你在 Flutter 应用中更好地处理长文本的展示问题！