我尝试使用 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]
看看最新版本的flutter_tex:^3.5.0+2,添加了样式功能,现在您可以轻松地对所有内容进行样式设置。此版本中有一些 API 更改,因此请在升级之前小心,并在继续之前检查示例。
对于渲染速度而言,您应该将渲染引擎从Mathjax更改为Katex,它比Mathjax快得多。例如
renderingEngine:RenderingEngine.Katex
就我而言,我很不高兴,因为我在测验应用程序中遇到了重新加载问题。
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
进行造型。现在渲染/重新加载问题已解决。
也许可以帮到你!!