Flutter Markdown渲染插件markdown_styled_widget的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter Markdown渲染插件markdown_styled_widget的使用

Title

默认示例 自定义示例

可用的Markdown特性

  • 一级到六级标题
  • 多行和内联代码
  • 粗体和斜体文本
  • 链接
  • 图片
  • 引用块
  • 分隔线

开始使用

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

dependencies:
  markdown_styled_widget: ^0.0.1

导入包：

import 'package:markdown_styled_widget/UI/markdown_styled_widget.dart';

基本用法

MarkdownStyledWidget(text);

自定义用法

MarkdownStyledWidget(text,
  style: MarkdownStyledWidgetStyles(
   // 描述样式
  ),
)

可用的样式

以下是 MarkdownStyledWidgetStyles 类中的可用参数：

属性 类型 默认值 描述
fontSize double 16 文本的默认大小
defaultFont String 'Roboto' 文本的默认字体
defaultWeight FontWeight normal 文本的默认权重
defaultForeground Color black 文本的默认颜色
boldWeight FontWeight bold 粗体文本的权重
boldForeground Color black54 粗体文本的颜色
linkForeground Color blueAccent 链接视图的颜色
blockquoteFont String 'IbarraRealNova' 引用块的字体
blockquoteSize double 16 引用块的字体大小
blockquoteBackground Color grey 引用块的背景颜色
blockquoteForeground Color black54 引用块的文本颜色
blockquoteBorderColor Color blueGrey 引用块左侧边框的颜色
blockquoteBorderSize double 10 引用块左侧边框的宽度
blockquotePadding double 10 引用块的填充大小
codeBackground Color black12 代码语句的背景颜色
codePadding double 10 代码语句的填充大小
codeBorderRadius double 10 多行代码语句的圆角半径
codeForeground Color black87 代码语句的文本颜色
codeFont String 'RobotoMono' 代码语句的字体
codeWeight FontWeight normal 代码语句的字体权重
heading1Size double 32 一级标题的字体大小
heading1Line bool true 一级标题后是否有线条
heading1Weight FontWeight w500 一级标题的字体权重
heading2Size double 28 二级标题的字体大小
heading2Line bool false 二级标题后是否有线条
heading2Weight FontWeight w500 二级标题的字体权重
heading3Size double 24 三级标题的字体大小
heading3Line bool false 三级标题后是否有线条
heading3Weight FontWeight w500 三级标题的字体权重
heading4Size double 20 四级标题的字体大小
heading4Line bool false 四级标题后是否有线条
heading4Weight FontWeight w500 四级标题的字体权重
heading5Size double 16 五级标题的字体大小
heading5Line bool false 五级标题后是否有线条
heading5Weight FontWeight w500 五级标题的字体权重
heading6Size double 12 六级标题的字体大小
heading6Line bool false 六级标题后是否有线条
heading6Weight FontWeight w500 六级标题的字体权重
lineHeight double 1 单独行的高度
lineColor Color grey 单独行的颜色
spaceSize double 10 小部件之间的间距

许可证

该项目采用MIT许可证。详情请参阅 LICENSE 文件。

完整示例Demo

以下是一个完整的示例Demo，展示了如何使用 markdown_styled_widget 插件：

import 'package:flutter/material.dart';
import 'package:markdown_styled_widget/UI/markdown_styled_widget.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String text = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: TextField(
                  keyboardType: TextInputType.multiline,
                  maxLines: null,
                  onChanged: (v) {
                    setState(() {
                      text = v;
                    });
                  },
                ),
              ),
              const Divider(thickness: 5),
              Expanded(
                  child: SingleChildScrollView(child: MarkdownStyledWidget(text))),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用markdown_styled_widget插件来渲染Markdown内容的示例代码。markdown_styled_widget是一个强大的Flutter插件，它允许你使用样式化的Markdown来构建用户界面。

首先，确保你已经在pubspec.yaml文件中添加了markdown_styled_widget的依赖：

dependencies:
  flutter:
    sdk: flutter
  markdown_styled_widget: ^0.6.0  # 请检查最新版本号

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

接下来是一个完整的示例代码，展示了如何使用markdown_styled_widget来渲染Markdown内容：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Markdown Styled Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MarkdownPage(),
    );
  }
}

class MarkdownPage extends StatelessWidget {
  final String markdownData = """
  # 这是一个标题

  这是一个段落。Flutter 是一个非常流行的跨平台UI框架。

  - 项目1
  - 项目2
  - 项目3

  ```dart
  void main() {
    print("Hello, Flutter!");
  }

点击这里访问Flutter官网 “”";

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Markdown Styled Widget Demo’), ), body: Padding( padding: const EdgeInsets.all(16.0), child: MarkdownStyled( markdown: markdownData, // 你可以在这里自定义样式 theme: MarkdownThemeData( header1: MarkdownThemeData.headerTheme( textStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), header2: MarkdownThemeData.headerTheme( textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), paragraph: MarkdownThemeData.paragraphTheme( textStyle: TextStyle(fontSize: 16), ), link: MarkdownThemeData.linkTheme( textStyle: TextStyle(color: Colors.blue, decoration: TextDecoration.underline), onTap: (url) { // 你可以在这里处理链接点击事件 print(“Clicked on URL: $url”); // 使用_launchURL函数打开URL（可选） // _launchURL(url); }, ), codeBlock: MarkdownThemeData.codeBlockTheme( backgroundColor: Colors.grey[200], padding: 16, textStyle: TextStyle(fontFamily: ‘monospace’), ), ), ), ), ); }

// 可选的URL打开函数（需要添加android和ios的URL权限） // _launchURL(String url) async { // if (await canLaunch(url)) { // await launch(url); // } else { // throw ‘Could not launch $url’; // } // } }


这个示例代码创建了一个Flutter应用，其中包含一个使用`markdown_styled_widget`渲染Markdown内容的页面。你可以根据需要自定义Markdown的样式，例如标题、段落、列表、代码块和链接的样式。

注意：如果你希望处理链接点击事件（如在示例代码中注释的部分），你需要添加对`url_launcher`插件的依赖，并处理相应的权限问题。这个示例中提供了基本的框架，你可以根据自己的需求进一步扩展和自定义。
回到顶部