Flutter：如何将数学方程式包装在容器中？答案

【问题标题】：Flutter: how to wrap mathematical equations in a container?Flutter：如何将数学方程式包装在容器中？
【发布时间】：2021-03-10 07:45:39
【问题描述】：

我想制作一个测验应用程序，它的问题中可能包含数学方程式。我检查了一些库（如flutter_math 和catex），它们非常适合渲染方程式，但我面临的一个问题是没有文本环绕选项。

例如，假设我有一个问题：“二次方程 X^2 + 6X + 8 = 0 的解是什么？”。我希望将完整的文本以及方程式包装在一个容器中。

你能给我一个解决这个问题的好方法吗？

这是一个带有 flutter_math 包的示例。

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Math.tex(
          r'\text {What are the solutions of the quadratic equation } x^2+6x+8=0 \text { this is some question text following the equation.}',
          textStyle: TextStyle(fontSize: 25, color: Colors.black),
        ),
      ),
    )

此代码不包含问题文本。相反，它会修剪文本。可能该包不支持包装。我只需要一种在实际文本之间添加方程式的好方法。

【问题讨论】：

您想将整个问题放在一个容器中，而将方程放在一个单独的子容器中？
你能告诉我们一些你已经尝试过的代码吗？
好的，我会更新问题。

标签： flutter word-wrap flutter-text

【解决方案1】：

我想这就是你想要的。要在多行上显示文本和方程式，请使用以下代码。

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text('What are the solutions of the quadratic equation'),
            SizedBox(height: 2),
            Math.tex(
              r'x^2+6x+8=0',
              textStyle: TextStyle(fontSize: 25, color: Colors.black),
            ),
            SizedBox(height: 2),
            Text('this is some question text following the equation'),
          ],
        ),
      ),
    );

在一行中使用文本和方程式使用此

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Wrap(
          direction: Axis.horizontal,
          children: [
            Text('What are the solutions of the quadratic equation '),
            Math.tex(
              r'x^2+6x+8=0',
              textStyle: TextStyle(fontSize: 25, color: Colors.black),
            ),
            Text(' this is some question text following the equation'),
          ],
        ),
      ),
    );

【讨论】：

好的，Wrap 小部件可以解决问题。我不知道有这样的小部件！但它并不完美，因为方程不能自行分裂。但是我可以在我想要的地方手动拆分（分成不同的数组元素），并在需要时进行包装。非常感谢。
当然！没问题

【解决方案2】：

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Text(
                  "What is the solutions of the quadratic equation X^2 + 6X + 8 = 0 ?",
                  //style: GoogleFonts.shortStack(color: Colors.white),
                ),
              ),
            ),

【讨论】：