Dart 自动调整文本大小，使其垂直适合容器

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

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

我希望，文本大小会自动更改以适合容器

颤振包自动调整文本大小对我不起作用，因为我只能调整文本大小以适应宽度或设置最大行，我也不知道

这是我的简化代码：

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


Container(
  child: autotext
);

TL；医生： 您的

AutoSizeText

小部件可能提供了无限约束。 如果将其包装在

列

、

行

、

列表视图

或类似内容中，则可能出现这种情况。 要解决此问题，请将其包装在扩展的小部件中

---

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

像

ListView

或

Column

这样的小部件不想太多地影响他们孩子的维度——它们应该尽可能小。 为了传达这一点，他们被赋予了最大宽度/高度

double.infinity

，告诉他们应该默认为他们的“自然/默认尺寸”。这种类型的约束称为“无界”

下面是一个例子，其中对所有这些都进行了更详细的描述

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

在你的帖子的评论中，你说有一个

列

小部件，所以我假设有一个

列

包含一个

容器

，而容器又包含

AutoSizeText

小部件。 如果没有

列

，而是有

行

或

列表视图

或类似内容，则过程基本相同

列

希望其子项尽可能小，因此它将无限约束传递给其所有子项

作为这些子容器之一，

容器

接收这些无限约束。 因为

容器

本身只是一个包装类，所以它只是将这些约束传递给它的子类

AutoSizeText

AutoSizeText

接收无界约束。 ，我们可以看到它以默认文本大小开始，并检查它是否合适（调用

\u checkTextFits

）。 如果它不适合，文本大小将减小，并重复此过程，直到文本足够小，可以适应给定的约束。 因为在您的例子中，约束是未绑定的，文本适合第一次尝试-这意味着小部件只使用默认大小。 确定文本大小后，它可以计算文本的尺寸并将其返回到树上

容器

接收这些维度。 因为它只是一个包装类，所以它只是依次将它们返回给其父类

最后，

列

接收尺寸和尺寸本身（可能会添加其他子项的尺寸）

解决方案

您不希望将无界约束传递给

AutoSizeText

小部件，因为这首先会破坏小部件的用途——将文本拟合到有界约束中。 您可以通过硬编码

容器的宽度和高度来确认这是一个问题，这将使
AutoSizeText
小部件正确调整文本大小

如果
容器
放置在
列
或类似内容中，则始终可以通过将其包装在扩展的
中来绑定约束

为什么解决方案有效

列
检查其子项中哪些是展开的
小部件。
它首先列出所有其他小部件。
只有这样，它才会根据
flex
因素（这本身就是另一个主题）在
扩展的
小部件之间划分剩余空间

这意味着
扩展的
s'子项将接收有界约束。
如果您将
容器
包装在一个
展开的
中，并且它是
列
中唯一展开的，那么它应该占用所有剩余的空间，并将文本完美地放在其内部。
TL；医生：
您的
AutoSizeText
小部件可能提供了无限约束。
如果将其包装在
列
、
行
、
列表视图
或类似内容中，则可能出现这种情况。
要解决此问题，请将其包装在扩展的

小部件中

---

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

像

ListView

或

Column

这样的小部件不想对其子对象的维度产生太大的影响-它们应该像