Flutter HTML内容渲染插件flutter_matrix_html的使用

Flutter HTML内容渲染插件flutter_matrix_html 的使用

flutter_matrix_html 是一个用于将矩阵风格的HTML标签渲染为Flutter小部件的插件。该插件支持多种HTML标签，并且可以自定义一些参数以满足不同需求。

安装

首先，你需要在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_matrix_html: ^1.0.0

然后运行 flutter pub get 来安装该插件。

当前支持的HTML标签

当前插件支持以下HTML标签：

• <b>、<strong>
• <i>、<em>
• <br>
• <tt>
• <code>
• <ins>、<u>
• <sub>、<sup>
• <del>、<s>、<strike>
• <span>
• <font>
• <a>
• <img>
• <table>、<thead>、<tbody>、<tfoot>、<th>、<td>、<caption>
• <ul>、<ol>、<li>
• <div>、<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
• <pre>、<blockquote>、<hr>
• <details>、<summary>
• <mx-reply> 被移除
• 支持内联和块级LaTeX
• 支持各种设置文本颜色和背景颜色的方法
• 对于以 https://matrix.to/#/ 和 matrix: 开头的 <a> 标签，支持生成“药丸”样式

示例用法

以下是一个完整的示例代码，展示了如何使用 flutter_matrix_html 插件来渲染HTML内容。

import 'package:flutter/material.dart';
import 'package:flutter_matrix_html/flutter_html.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
          ),
        ),
        child: SingleChildScrollView(
          child: Html(
            data: """
            <p>whiespace thingy</p>
            <p>more thingy</p>
            <p>Hello <b>Wo</b><i>rl</i>d<br>nyaaa <a href="https://example.org/meow">link<br>break</a>

            https://example.org meow <sub>low</sub> <sup> high</sup>
            <br>
            <span data-mx-spoiler="heya">hmm https://example.org how are you?</span>
            <br>
            <font color="red">red text</font>
            hmm <font color="red"> red</font><font color="green"> green</font>
            </p>
            <p>
            inside paragraph <b>inside bold<h1>heading</h1>bold</b>paragraph
            </p>
            <blockquote>
            <ol start="1">
              <li>fox</li>
              <li>floof</li>
              <li>tail<br>floof</li>
              <li>pawsies
                <ol>
                  <li>cute</li>
                  <li>adorable</li>
                </ol>
              </li>
            </ol>
            <ol start="10">
              <li>fox</li>
              <li>floof</li>
              <li>tail<br>floof</li>
              <li>pawsies
                <ol>
                  <li>cute</li>
                  <li>adorable</li>
                </ol>
              </li>
            </ol>
            <ol start="100">
              <li>fox</li>
              <li>floof</li>
              <li>tail<br>floof</li>
              <li>pawsies
                <ol>
                  <li>cute</li>
                  <li>adorable</li>
                </ol>
              </li>
            </ol>
            </blockquote>
            <h1>The caption element</h1>
            <table>
              <caption>Monthly savings</caption>
              <tr>
                <th>Month</th>
                <th>Savings</th>
              </tr>
              <tr>
                <td>January</td>
                <td>\$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>\$50</td>
              </tr>
            </table>
            <p>paragraph</p>
            <hr>
            <p>more paragraph</p>

            <details>
              <summary>System Requirements</summary>
              <p>Requires a computer running an operating system. The computer
              must have some memory and ideally some kind of long-term storage.
              An input device as well as some form of output device is
              recommended.</p>
            </details>

            <details>
              <summary>System Requirements which are very, very long. So long even, that it overflows the summary field. Who thought that would have happened? Apparently not soru, because she initially didn't think of that. Which is why she is writing now this long summary text to test it.</summary>
              <p>Requires a computer running an operating system. The computer
              must have some memory and ideally some kind of long-term storage.
              An input device as well as some form of output device is
              recommended.</p>
            </details>

            <pre><code class="language-dart">    if (parseContext.condenseWhitespace) {
      finalText = _condenseHtmlWhitespace(node.text);
      // TODO: figure out how to access before and after to condense around the tag borders
    }
</code></pre>

            <code>inline code</code>

            <p>
            hmmm <ruby>
            明 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
            </ruby> hmmmm
            </p>
            <hr>
            <p>
            <ruby> 明<rp>(</rp><rt>あ</rt><rp>)</rp>日<rp>(</rp><rt>した</rt><rp>)</rp></ruby>
            </p>
            <hr>
            <p>
            foxes <ruby style="ruby-position: over;"><ruby style="ruby-position: under;">明<rp>(</rp><rt>あ</rt><rp>)</rp>日<rp>(</rp><rt>した</rt><rp>)</rp></ruby><rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby> floof
            </p>
            <hr>
            <p>
            hmmmmmm<ruby style="ruby-position: over;"><ruby style="ruby-position: under;">mm<rp>(</rp><rt>あ</rt><rp>)</rp>mmm<rp>(</rp><rt>した</rt><rp>)</rp></ruby><rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby>mmmmmmm
            </p>
            <hr>
            <p>
            hmmm <ruby style="ruby-position: under;">
            明 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
            </ruby> hmmmm
            </p>
            <p>
            outside ruby <ruby>inside ruby<rp>(</rp><rt>rt</rt><rp>)</rp> moar ruby</ruby> outside ruby
            </p>
            """,
            onLinkTap: (url) => print('clicked on url $url'),
            linkStyle: TextStyle(decoration: TextDecoration.underline),
            shrinkToFit: true,
          ),
        ),
      ),
    );
  }
}