自动调整文本以垂直适应容器

Question

我想创建一个应用程序，在容器中显示有时较短、有时较长的文本。在构建小部件以适应屏幕大小后，此容器不应改变大小。文本本身来自数据库，我不知道它可以有多长。

当我在容器中打印文本时，有时它适合，有时上面和下面有很多空间，当文本很短时，或者有时文本溢出并且不可见。

我希望，文本大小会自动更改以适应容器。溢出的容器

flutter 包 Auto-Size-Text 对我不起作用，因为我只能调整文本大小以适应宽度或设置最大行，我也不知道。

这是我的代码简化：

AutoSizeText autotext = AutoSizeText(text, style: style, textAlign: TextAlign.center, presetFontSizes: [25.0,22.0,20.0,18.0], semanticsLabel: text);


Container(
  child: autotext
);

Answer 1

TL;DR： 您的AutoSizeText小部件可能具有无限约束。如果它被包裹在 a 、或类似的东西中Column，就会出现这种情况。要解决此问题，请将其包装在小部件中。RowListViewExpanded

为了回答这个问题，我们需要了解 Flutter 是如何进行布局的。基本上，框架请求顶部小部件的高度和宽度（称为“尺寸”），该框架提供最小和最大宽度和高度（称为“约束”）。为了计算它的尺寸，小部件会根据一些约束询问他们的孩子他们想要什么尺寸。因此，每个小部件都被告知约束并返回这些约束内的具体维度。

小部件喜欢ListView或Column不想过多地影响孩子的尺寸 - 它们应该尽可能小。为了传达这一点，他们的最大宽度/高度为double.infinity，告诉他们他们应该默认为他们的“自然”/默认尺寸。这种类型的约束称为“无界”。

这是有关 Flutter 渲染管道的Google Tech Talk 视频，其中更详细地描述了所有这些。

考虑到这个过程，让我们来看看你的小部件在布局过程中的表现：

在对您的帖子的评论中，您说有一个Column小部件，所以我假设有一个Column包含 a Container，而后者又包含该AutoSizeText小部件。如果不是 a Column，而是aRow或ListView类似的东西，则过程基本相同。

在Column希望其孩子要尽可能的小，所以它通过无边界约束其所有的孩子。

作为这些孩子之一，Container接受那些无限的约束。因为Container本身只是一个包装类，所以它只是将这些约束传递给它的子类AutoSizeText.

在AutoSizeText接收无界的约束。 查看它的源代码，我们可以看到它以默认文本大小开始并检查它是否适合（调用_checkTextFits）。如果不适合，则减小文本大小并重复此过程，直到文本小到足以适应给定的约束。因为在您的情况下，约束是未绑定的，文本适合第一次尝试 - 这意味着小部件仅使用默认大小。确定文本大小后，它可以计算文本的尺寸并将它们返回到树中。

所述Container接收的那些尺寸。因为它只是一个包装类，它只是依次将它们返回给它的父类。

最后，Column接收尺寸和尺寸本身（可能添加其他孩子的尺寸）。

解决方案

您不想将无界约束传递给AutoSizeText小部件，因为这首先违背了小部件的目的 - 将文本拟合到有界约束中。您可以通过硬编码Container的宽度和高度来确认这是问题所在，这应该使AutoSizeText小部件正确调整文本大小。

如果Container放置在 aColumn或类似的东西中，您始终可以通过将其包装在Expanded.

为什么解决方案有效

在Column其中的孩子们的支票Expanded部件。它首先布置所有其他小部件。只有这样，它才会Expanded根据小部件的flex因素（这本身就是另一个主题）在小部件之间划分剩余空间。

这意味着Expandeds 的孩子将收到有界约束。如果你用Containeran包裹你的Expanded并且它是 中唯一的扩展Column，它应该占用所有剩余的空间，并在其内部完美地适应文本。