Flutter LaTeX渲染插件easy_latex的使用

easy_latex

easy_latex 插件允许开发者在其 Flutter 应用程序中轻松地包含 LaTeX 元素。LaTeX 的渲染是在 Dart 中处理的，确保了快速且高效的显示，而无需依赖 HTML 转换。

在线渲染演示

查看 在线渲染 以了解插件的实际效果。

小部件

Latex()

Latex() 小部件用于渲染独立的 LaTeX 字符串。

参数说明

• locale: Latex() 小部件包含一个 locale 参数，允许你根据不同的语言来调整数字格式。例如，将 locale 设置为 ‘de’ 会将数字 3.14159 显示为 3,14159，符合德国的标准格式。

import 'package:easy_latex/easy_latex.dart';

Latex(
  r'x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\ \pi = 3.14159... ',
  fontSize: 24,
  locale: 'en',
);

LText()

LText() 小部件允许你在文本中集成 Markdown 和 LaTeX，从而实现丰富的格式化和数学表达式。

支持的 Markdown 命令

• **bold**
• *italic*
• `code`
• \(Latex)`

参数说明

• locale: LText() 小部件包含一个 locale 参数，允许你根据不同的语言来调整数字格式。例如，将 locale 设置为 ‘de’ 会将数字显示为 3,14159，符合德国的标准格式。

import 'package:easy_latex/easy_latex.dart';

LText(
  r'This is **bold text**, this is *italic text*, '
  r'this is `code`. The value of \(\pi\) is \(3.14159...\) '
  r'and the value of \(\sqrt{2}\) is \(1.41421...\)',
  fontSize: 24,
  latexLocale: 'en',
);

LatexSpan()

LatexSpan() 小部件便于在 RichText() 中嵌入 LaTeX 代码。

注意事项

• LatexSpan() 小部件不会继承父级 TextSpan 的 fontSize 和颜色（字体颜色）。这些属性必须通过 style 属性为每个 LatexSpan 显式定义。

import 'package:easy_latex/easy_latex.dart';

RichText(
  text: TextSpan(
    style: MTextStyles.largeText,
    children: [
      const TextSpan(text: 'The value of '),
      LatexSpan(text: r'\pi', style: const TextStyle(fontSize: 16)),
      const TextSpan(text: ' is '),
      LatexSpan(text: r'3.14159...', style: const TextStyle(fontSize: 16)),
      const TextSpan(text: ' and the value of '),
      LatexSpan(text: r'\sqrt{2}', style: const TextStyle(fontSize: 16)),
      const TextSpan(text: ' is '),
      LatexSpan(text: r'1.41421...', style: const TextStyle(fontSize: 16)),
    ],
  ),
);

不支持的LaTeX命令

我们知道目前有一些你可能需要的功能还没有被支持。我们正在积极地开发这些功能，以便在未来的版本中支持它们。目前，以下命令是不可用的：

• 字体: \mathit{}, \mathsf{}
• 表格: \begin{tabular}, \end{tabular}, \multicolumn, \multirow, \hline, \cline
• 数组: \begin{array}, \end{array}
• 矩阵: \begin{vmatrix}, \end{vmatrix}, \begin{Vmatrix}, \end{Vmatrix}, \begin{smallmatrix}, \end{smallmatrix}
• 对齐: \begin{align}, \end{align}, \begin{alignat}, \end{alignat}
• 上标下标: \underset{}, \overset{}, \stackrel{}, \xrightarrow{}, \xleftarrow{}
• 幻影: \phantom{}, \hphantom{}, \vphantom{}
• 重音符号: \acute, \grave, \breve, \check
• 重音符号: \acute, \grave, \breve, \check
• 上下限: \sum\nolimits, \prod\nolimits, \int\limits, \sideset{}
• 取消: \!, \not, \cancel{}, \bcancel{}, \xcancel{}, \cancelto{}
• 左右括号: \left|, \right|, \left., \right., \left\rangle, \right\rangle
• 大括号: \bigl, \Bigl, \biggl, \Biggl, \bigr, \Bigr, \biggr, \Biggr
• 分数: \dfrac{}, \dbinom{}{}, \tbinom{}{}
• 其他命令: \atop, \varliminf, \varlimsup, \longdiv

字体和许可

插件 lib/fonts 文件夹中的字体来自 KaTeX，这是一个 LaTeX 排版库。这些字体经过调整以实现最佳的集成和使用。字体根据 MIT 许可证授权，许可证副本位于 fonts/LICENSE 文件中。更多详情，请参阅此文件。

许可证

该插件在 BSD 许可证下分发。完整的许可证文本位于项目根目录下的 LICENSE 文件中。

联系方式

如有任何问题或建议，请在 GitHub 仓库中打开一个 issue，或者直接联系我们：[dev@miranda.works]。

完整示例代码

下面是完整的示例代码，展示了如何在 Flutter 应用程序中使用 easy_latex 插件。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          appBarTheme: const AppBarTheme(color: Colors.white),
          scaffoldBackgroundColor: Colors.white),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Easy Latex'),
        ),
        body: Column(
          children: [
            Container(),
            const Latex(
              r'x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\ \pi = 3.14159... ',
              fontSize: 24,
              locale: 'en',
            ),
            LText(
              r'This is **bold text**, this is *italic text*, this is `code`. '
              r'The value of \(\pi\) is \(3.14159...\) and the value of \(\sqrt{2}\) is '
              r'\(1.41421...\)',
              fontSize: 24,
              latexLocale: 'en',
            ),
          ],
        ),
      ),
    );
  }
}