Flutter：无法使用 Flutter_Html 和 flutter_math_fork 包渲染数学方程

问题描述 投票：0回答：1

我正在尝试在 Flutter 中构建一个小部件来呈现 HTML 内容，包括数学方程。为此，我使用 

flutter_html
和 
flutter_math_fork
包。虽然常规 HTML 内容可以正确呈现，但我无法使用 
<tex>
包提供的 
flutter_math_fork
标签扩展来呈现数学方程。

问题： 我创建了一个名为 HtmlContent 的可重用小部件，它接受包含 HTML 内容的输入文本。在此小部件中，我使用 

flutter_html
包中的 HTML 小部件以及自定义标签扩展来使用标签渲染数学方程。尽管遵循文档和示例，数学方程并未按预期呈现。

代码片段：

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class HtmlContent extends StatelessWidget {
  final String text;
  const HtmlContent({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Html(
      data: text,
      shrinkWrap: true,
      extensions: [
        TagExtension(
            tagsToExtend: {"tex"},
            builder: (extensionContext) {
              return Math.tex(
                extensionContext.innerHtml,
                mathStyle: MathStyle.display,
                textStyle:
                    extensionContext.styledElement?.style.generateTextStyle(),
                onErrorFallback: (FlutterMathException e) {
                  return Text(e.message);
                },
              );
            }),
      ],
    );
  }
}

预期行为： 我希望 HTML 内容中的 

<tex>
标签能够由 
flutter_math_fork
包处理并正确渲染数学方程。

当前结果： HTML 内容可以正确呈现，但 

<tex>
标签内包含的数学方程不会被呈现，并且不会显示任何错误消息。我通过了

HtmlContent(
                      text: r'''<!DOCTYPE html>
<html>
<head>
  <title>Math Equation, Image, and Text</title>
</head>
<body>

<h1>Math Equation, Image, and Text Example</h1>

<!-- Math Equation using LaTeX notation -->
<p>Math Equation: \(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\)</p>

<!-- Image -->
<img src="https://example.com/sample-image.jpg" alt="Sample Image" width="300" height="200">

<!-- Text -->
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat justo at sem venenatis, nec facilisis odio ultricies. 
  Integer vel quam eu ligula posuere scelerisque. Curabitur varius odio non augue ultrices, sit amet vestibulum lectus tincidunt. 
  Suspendisse potenti.
</p>

</body>
</html>
''',
                    ),

输出图像：

附加信息：

  • 我已确保已导入所有必要的包并且 依赖关系。
  • 我已经验证了传递给 HtmlContent 的文本变量 小部件包含有效的 HTML 以及格式正确的 
    <tex>
    标签。 如果您能帮助解决此问题并让数学方程在 Flutter 应用程序中正确渲染，我将不胜感激。预先感谢您的帮助！
flutter math latex render flutter-html
1个回答
0
投票

在 HTML 内容中，您必须使用实际的 

<tex>
标签并用 
</tex>
而不是 
\(
和 
\)
关闭它。所以方程部分应该是这样的：

<p>Math Equation: <tex>x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</tex></p>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.