自动调整文本大小以垂直适合容器

时间:2018-12-21 09:54:43

标签: dart flutter

我想创建一个应用,该应用在容器中显示有时更短,有时更长的文本。在构建窗口小部件以适合屏幕尺寸之后,此容器的大小不应更改。文本本身来自数据库,我不知道它可以持续多长时间。

当我在容器中打印文本时,有时可以容纳文本,有时上下有很多空间,当文本较短时,或者有时文本溢出并且不可见。

我想要自动更改文本大小以适合容器。 Container with overflow

颤振包Auto-Size-Text对我不起作用,因为我只能调整文本的大小以适合宽度或设置最大行数,而我也不知道。

这是我的简化代码:

/system/priv-app

1 个答案:

答案 0 :(得分:1)

TL; DR: 您的AutoSizeText小部件可能具有不受限制的约束。 如果将其包装在ColumnRowListView或类似的东西中,则可能是这种情况。 要解决此问题,请将其包装在Expanded小部件中。


为了回答这个问题,我们需要了解Flutter如何执行布局。 基本上,框架要求顶部小部件的高度和宽度(称为“尺寸”),框架提供最小和最大宽度和高度(称为“约束”)。 为了计算其尺寸,小部件根据一些约束条件询问其子项它们希望具有的尺寸。 因此,每个小部件都会收到约束,并在这些约束内返回具体尺寸。

ListViewColumn之类的小部件不想太大地影响孩子的尺寸-它们应该尽可能地小。 为了传达这些信息,它们的最大宽度/高度为double.infinity,告诉他们应该默认为其“自然” /默认尺寸。这种约束称为“无界”。

这里是Google Tech Talk video about Flutter's rendering pipeline,所有这些都将在下面详细介绍。

牢记此过程,让我们看一下您的小部件在布局过程中的表现:

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

Container希望其子项尽可能小,以便将无限制的约束传递给所有子项。

Container是这些孩子中的一个,受到了这些无限的约束。 由于AutoSizeText本身只是一个包装器类,因此只需将这些约束传递给其子级AutoSizeText

_checkTextFits收到无限制的约束。 Looking at its source code,我们可以看到它以默认的文字大小开始,并检查它是否适合(调用Container)。 如果不合适,则减小文本大小,并重复此过程,直到文本足够小以适合给定的约束为止。 因为在您的情况下,约束是不受约束的,所以文本适合第一次尝试-这意味着小部件仅使用默认大小。 确定了文本大小后,它可以计算文本的尺寸并将其返回到树上。

Column接收这些尺寸。 因为它只是一个包装器类,所以只需将它们依次返回给其父级即可。

最后,AutoSizeText会收到自身的尺寸和大小(可能会加上其他孩子的尺寸)。

解决方案

您不想将无限制的约束传递给Container小部件,因为这首先破坏了小部件的目的-使文本适合边界约束。 您可以通过对AutoSizeText的宽度和高度进行硬编码来确认这是问题所在,这可以使Container小部件正确调整文本大小。

如果将Column放在Expanded或类似的内容中,则始终可以通过将约束包装在Column中来约束约束。

解决方案为何起作用

Expanded检查其哪些子级是Expanded小部件。 首先列出所有其他小部件。 直到那时,它才根据flex个因素在Expanded个小部件之间划分剩余空间(这本身就是另一个主题)。

这意味着Container的孩子将受到限制约束。 如果将Expanded包裹在Column中,并且它是from itertools import product LIMIT = 4 l1 = [1,2,3] results = [] for i in range(1, LIMIT+1): results.extend(product(l1, repeat=i)) print(results) 中唯一的扩展名,则它将占用所有剩余空间,并使文本完全适合自身。