Flutter markdown 的显示组件

7 min read

Flutter 提供了一个 Markdown 插件,可以解析和显示 Markdown 格式的文本。这个插件包括了一个 Markdown 组件来显示解析后的文本。

Markdown 组件是一个 Stateless Widget,它接收一个字符串类型的内容并将其转换为 Markdown 形式的文本。它会根据语法规则解析文本并将其显示在屏幕上。

下面是一个简单的例子,演示了如何在 Flutter 中使用 Markdown 组件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Markdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Markdown Demo')),
        body: Markdown(data: _markdownData),
      ),
    );
  }

  String _markdownData = """
  # Flutter Markdown Demo
  
  This is a **demo** for the *Flutter Markdown* plugin.
  
  ## Features
  
  - Headers
  - Emphasis
  - Lists
  - Links
  - Images
  
  ## Acknowledgments
  
  This plugin is based on [markdown_dart](https://github.com/flutter/markdown_dart).
  
  ## License
  
  BSD 2-Clause License
  """;
}

在上面的代码中,我们使用了 flutter_markdown 插件,并在 Scaffoldbody 中添加了 Markdown 组件。然后将要解析的 Markdown 文本传递给 data 参数。

运行上述应用程序,您将看到渲染的 Markdown 文本,带有标题、列表、样式和链接等元素。