V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
znjw
V2EX  ›  Flutter

Flutter Math: 使用纯 Flutter 渲染 LaTeX 数学公式

  •  
  •   znjw · 2020-10-27 13:22:52 +08:00 · 3621 次点击
    这是一个创建于 1486 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍一下我开发的一个 Flutter 插件:Flutter Math,最近刚刚发布了 0.2.0 版。Flutter Math 是一个完全使用 Dart 和 Flutter 渲染 LaTeX 数学公式的插件,可以看作是移植在 Dart 和 Flutter 平台上的 KaTeX 。其支持的 LaTeX 语法大致与 KaTeX 相同(少数当前版本暂不支持的语法详见 Github 仓库),对数学公式的渲染结果几乎像素级还原 KaTeX 。

    相比已有的 flutter_tex 插件,本插件完全的基于 Dart 和 Flutter,不包含任何 WebView 和 Javascript,性能远超过 flutter_tex 。大家如果频繁遇到 flutter_tex 带来的卡顿以及崩溃,欢迎试用 Flutter Math 。所有的组件都同时支持手机端和 Web 端[^1],[^2]。可以在此查看 Web 端效果 Flutter Math Demo

    渲染样例

    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

    二次方程解

    i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)

    薛定谔方程

    \hat f(\xi) = \int_{-\infty}^\infty f(x)e^{- 2\pi i \xi x}\mathrm{d}x

    傅里叶变换

    使用方法

    1. 在 pubspec.yaml 文件中添加对flutter_math的依赖
    2. 在代码中使用Math.tex(expression)组件展示渲染结果。可以通过提供可选参数mathStyletextStyle控制公式样式,onErrorFallback自定义输入错误时如何展示报错信息。样例如下
      Math.tex(
        r'\frac a b',
        mathStyle: MathStyle.text, // 行内公式
        textStyle: TextStyle(fontSize: 42),
      )
      

    0.2.0 版本新加入可选择版本SelectableMath,基本与 Flutter 自带的SelectableText效果相同。

    项目仓库地址:GitHub 地址。目前版本为 0.1.4,更多信息以及暂不支持的 KaTeX 特性欢迎查阅 GitHub 页面。欢迎打星,欢迎 fork !


    [^1]: Web 端 debug 可能会出现栈溢出错误,这是一个已知 Dart 编译器 bug 并且短期内 stable/beta 通道修复可能性较小。请升级到带有 Dart2.11.0-254.0.dev 或更高版本的 Flutter 。

    [^2]: Web 端部分符号右侧渲染不全,这是目前 Flutter 的 DomCanvas 后端自身 bug,暂无解决办法。

    1 条回复    2020-11-19 08:54:09 +08:00
    sunbreak
        1
    sunbreak  
       2020-11-19 08:54:09 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1204 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:11 · PVG 07:11 · LAX 15:11 · JFK 18:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.