Flutter Markdown渲染插件uzu_flavored

A markdown renderer for Flutter. 它支持原始格式的Markdown，但不支持内联HTML。

概述

uzu_flavored_markdown 包将Uzu风味的Markdown（一种轻量级标记语言）渲染为包含富文本表示的Flutter小部件。

uzu_flavored_markdown 是基于Dart的 markdown 包构建的，该包将Markdown解析为抽象语法树（AST）。 AST 的节点是Markdown数据的HTML表示。

此包是从 flutter_markdown 分支出来的。

使用Uzu Flavored Markdown

要使用 uzu_flavored_markdown 渲染Markdown内容，可以使用 UzuMd 小部件。它接收一个字符串作为输入，并将其渲染为富文本。

示例代码

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

const String _markdownData = """
# 最小化Markdown测试
---
这是一个简单的Markdown测试。向Markdown小部件提供包含Markdown标签的文本字符串，它将在可滚动的小部件中显示格式化的输出。

## 第一节
Maecenas eget **弧线 egestas**, mollis ex vitae, posuere magna. Nunc eget
aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
eget est condimentum, vitae porttitor diam ornare。

### 子节A
Sed et massa finibus, blandit massa vel, vulputate velit. Vestibulum vitae
venenatis libero. **__Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante.__** Sed a fermentum elit. Curabitur sodales metus id mi
ornare, in ullamcorper magna congue。
""";

void main() {
  runApp(
    MaterialApp(
      title: "Markdown Demo",
      home: Scaffold(
        appBar: AppBar(
          title: const Text('简单Markdown Demo'),
        ),
        body: SafeArea(
          child: UzuMd(
            data: _markdownData, // Markdown内容
          ),
        ),
      ),
    ),
  );
}

解释

导入必要的包：

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

这里我们导入了Flutter的核心库和 uzu_flavored_markdown 包。

定义Markdown内容：
```
const String _markdownData = "..."
```
这里定义了一个包含Markdown语法的字符串 _markdownData。

创建应用主程序：

void main() {
  runApp(
    MaterialApp(
      title: "Markdown Demo",
      home: Scaffold(
        appBar: AppBar(
          title: const Text('简单Markdown Demo'),
        ),
        body: SafeArea(
          child: UzuMd(
            data: _markdownData, // 使用UzuMd渲染Markdown内容
          ),
        ),
      ),
    ),
  );
}

eggper 1楼

更多关于Flutter Markdown渲染插件uzu_flavored_markdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

uzu_flavored_markdown 是一个用于在 Flutter 应用中渲染 Markdown 的插件。它提供了比 Flutter 自带的 flutter_markdown 更丰富的功能和自定义选项。以下是如何使用 uzu_flavored_markdown 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  uzu_flavored_markdown: ^0.0.1  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 uzu_flavored_markdown：

import 'package:uzu_flavored_markdown/uzu_flavored_markdown.dart';

3. 使用 `UzuMarkdown` 组件

UzuMarkdown 是一个用于渲染 Markdown 的组件。你可以将 Markdown 文本传递给它，并在应用中显示渲染后的内容。

class MyMarkdownPage extends StatelessWidget {
  final String markdownText = '''
# 标题 1
## 标题 2

这是一个段落，**加粗** 和 *斜体* 文本。

- 列表项 1
- 列表项 2

[这是一个链接](https://flutter.dev)
''';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown 示例'),
      ),
      body: SingleChildScrollView(
        child: UzuMarkdown(
          data: markdownText,
        ),
      ),
    );
  }
}

4. 自定义样式

UzuMarkdown 允许你自定义 Markdown 的样式。你可以通过 style 参数来设置不同的样式。

UzuMarkdown(
  data: markdownText,
  style: MarkdownStyle(
    h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    h2: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    p: TextStyle(fontSize: 16, color: Colors.black87),
    a: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
  ),
);

5. 处理链接点击

你可以通过 onTapLink 参数来处理链接的点击事件。

UzuMarkdown(
  data: markdownText,
  onTapLink: (String url) {
    print('链接被点击: $url');
    // 你可以在这里处理链接点击，例如打开浏览器
  },
);

6. 其他功能

uzu_flavored_markdown 还支持其他功能，例如表格、代码块、图片等。你可以根据需要进一步探索和使用这些功能。

7. 示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Markdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyMarkdownPage(),
    );
  }
}

class MyMarkdownPage extends StatelessWidget {
  final String markdownText = '''
# 标题 1
## 标题 2

这是一个段落，**加粗** 和 *斜体* 文本。

- 列表项 1
- 列表项 2

[这是一个链接](https://flutter.dev)
''';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown 示例'),
      ),
      body: SingleChildScrollView(
        child: UzuMarkdown(
          data: markdownText,
          style: MarkdownStyle(
            h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            h2: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            p: TextStyle(fontSize: 16, color: Colors.black87),
            a: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
          ),
          onTapLink: (String url) {
            print('链接被点击: $url');
            // 你可以在这里处理链接点击，例如打开浏览器
          },
        ),
      ),
    );
  }
}

Flutter Markdown渲染插件uzu_flavored_markdown的使用

概述