How to Multi-column text in Flutter（文本应根据其长度拆分为多个小部件）

Question

tl;博士

如何在其文本小部件中达到最大高度后拆分字符串？

我的问题

我是 Flutter 的新手，这就是为什么我可能没有看到 low hangig fruits 的原因。

我想要的是，将一个不同长度的字符串分成 n 个样式的文本小部件。

总而言之，它应该看起来像一个多列布局，而且在双屏设备上也是如此（左侧 2 个，右侧 2 个）。

这就是为什么我认为，最好的想法是将文本拆分为一个文本小部件列表，这些小部件受其最大高度的约束/限制。

问题

如何计算适合列的文本长度，我可以将其拆分？

在那之后我想我知道我必须做什么

我想在我知道如何拆分文本之后，其他一切都很简单。

我用谷歌搜索的

• 如何获取 flutter 中文本小部件的大小

草图

Answer 1

要将文本拆分为 Multi-Line Column ，您只需将Text小部件包装在Expanded小部件中。 Expanded的小部件将在Text位于Column末尾时自动更改其行。

Answer 2

尚未找到完全令人满意的解决方案，但这可能是一种解决方法：

• 在 '\n' 上拆分您的文本
• Map 它连接到一个小部件
• 在 Wrap() 中包围这些小部件

Wrap(
  direction: Axis.vertical,
  children: text.split("\n").map(
    (line) => Text(line),
  ).toList(),
)