如何在 Flutter 中正确实现数学方程（TeX）

Question

我尝试使用 flutter TeX 包在 flutter 应用程序中实现数学方程。渲染方程需要很多时间。 它看起来并不像我想要的那么好。是否有任何其他实现可以有效地使用数学化学和其他复杂格式方程而不影响设计。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body:TeXView(
          teXHTML: r"""
  <style>#myDiv 
   {color:   "#CC0000",}</style>

  <div id='myDiv'>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>
  """ ,
          renderingEngine: RenderingEngine.Katex,  // Katex for fast render and MathJax for quality render.
          onRenderFinished: (height) {
                print("Widget Height is : $height");
                },   
          onPageFinished: (string) {
                print("Page Loading finished");
              },
        )
    );
  }}

这是输出：[屏幕截图][1]

Answer 1

现在还有

catex

包（全面披露：我是作者）。

CaTeX不需要网络视图，这就是为什么你可以极其快速地渲染你的方程（基本上与任何其他小部件一样快）。

注意：目前处于预发布阶段，这意味着很多功能仍然不受支持。

import 'package:catex/catex.dart';

Widget build(BuildContext context) => CaTeX(r'x = {-b \pm \frac{\sqrt{b^2-4ac}}  {2a}}');

Answer 2

看看最新版本的flutter_tex:^3.5.0+2，添加了样式功能，现在您可以轻松地对所有内容进行样式设置。此版本中有一些 API 更改，因此请在升级之前小心，并在继续之前检查示例。

对于渲染速度而言，您应该将渲染引擎从Mathjax更改为Katex，它比Mathjax快得多。例如

renderingEngine:RenderingEngine.Katex

Answer 3

就我而言，我很不高兴，因为我在测验应用程序中遇到了重新加载问题。

 TeXViewGroup(
      children: question.options!.map((Option option) {
        return TeXViewGroupItem(
          id: option.id!,
          child: TeXViewDocument(
            option.title!,
            style: TeXViewStyle(
              sizeUnit: TeXViewSizeUnit.pixels,
              contentColor: _getOptionTextColor(question, option),
              backgroundColor: _getOptionBackgroundColor(question, option),
              borderRadius: const TeXViewBorderRadius.all(8),
              border: TeXViewBorder.all(
                TeXViewBorderDecoration(
                  borderWidth: 1,
                  borderColor: _getOptionTextColor(question, option),
                ),
              ),
              margin: const TeXViewMargin.only(bottom: 8, top: 8),
              padding: const TeXViewPadding.all(16),
            ),
          ),
        );
      }).toList()

如您所见，我在 TeXViewDocument 中使用

style

，并且有条件地更改背景颜色和其他样式。

现在我使用

selectedItemStyle

和

normalItemStyle

进行造型。现在渲染/重新加载问题已解决。

也许可以帮到你！！