Flutter Markdown内容截断与展示插件djangoflow_markdown_truncate的使用

Flutter Markdown内容截断与展示插件djangoflow_markdown_truncate的使用

DjangoFlow Package Logo

✂️ djangoflow_markdown_truncate ✂️

GitHub Repository Pub Package

一个用于优雅地截断Markdown内容的Flutter插件，支持字符和行数限制。

🌟 特性 #

  • 基于字符的截断: 按照字符数量限制内容。
  • 基于行数的截断: 按照行数限制内容。
  • “更多内容”集成: 当内容被截断时附加“更多内容”链接。
  • 样式保留: 截断后仍能保留Markdown样式。

📱 示例 #

以下是在iPhone模拟器上运行的djangoflow_markdown_truncate插件效果：

截图展示iPhone模拟器上的djangoflow_markdown_truncate

📦 安装 #

要在您的Flutter项目中添加djangoflow_markdown_truncate插件，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
  djangoflow_markdown_truncate: <latest_version>

然后运行以下命令安装：

flutter pub get

🚀 快速开始 #

以下是如何在应用中使用该插件来截断Markdown内容的示例代码：

import 'package:djangoflow_markdown_truncate/djangoflow_markdown_truncate.dart';

DjangoflowMarkdownLineTruncate(
  data: """
  # Markdown Content
  这是一个可能过长而无法完全显示的Markdown内容示例。
  您可以使用此插件在达到一定行数或字符数后截断它。
  """,
  maxLines: 3,
  styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
  onReadMoreTapped: () {
    print("Read more tapped!");
  },
);

更多关于Flutter Markdown内容截断与展示插件djangoflow_markdown_truncate的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Markdown内容截断与展示插件djangoflow_markdown_truncate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


djangoflow_markdown_truncate 是一个用于在 Flutter 应用中截断和展示 Markdown 内容的插件。它可以帮助你在显示 Markdown 内容时，根据需要进行截断，并在用户点击时展开完整内容。以下是使用该插件的基本步骤和示例。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  djangoflow_markdown_truncate: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

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

import 'package:djangoflow_markdown_truncate/djangoflow_markdown_truncate.dart';

3. 使用 MarkdownTruncate 组件

MarkdownTruncate 组件允许你截断 Markdown 内容，并在用户点击时展开完整内容。以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Markdown Truncate Example'),
        ),
        body: Center(
          child: MarkdownTruncate(
            markdown: '''
# This is a Markdown Example

This is a **bold** text and this is an *italic* text.

Here is a list:
- Item 1
- Item 2
- Item 3

This is a [link](https://flutter.dev).

This is a long text that will be truncated if it exceeds the specified length.
            ''',
            maxLength: 100,  // 最大显示长度
            onTapShowMore: () {
              print('Show more clicked!');
            },
            onTapShowLess: () {
              print('Show less clicked!');
            },
          ),
        ),
      ),
    );
  }
}

4. 参数说明

  • markdown: 要显示的 Markdown 内容。
  • maxLength: 最大显示长度，超过这个长度的内容将被截断。
  • onTapShowMore: 当用户点击“显示更多”时触发的回调。
  • onTapShowLess: 当用户点击“显示更少”时触发的回调。

5. 自定义样式

你可以通过 style 参数来自定义 Markdown 的样式，例如字体大小、颜色等。

MarkdownTruncate(
  markdown: '''
# This is a Markdown Example

This is a **bold** text and this is an *italic* text.
  ''',
  maxLength: 50,
  style: MarkdownStyle(
    h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    p: TextStyle(fontSize: 16, color: Colors.black87),
    strong: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
    em: TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
  ),
  onTapShowMore: () {
    print('Show more clicked!');
  },
  onTapShowLess: () {
    print('Show less clicked!');
  },
);
回到顶部