Flutter: 垂直文本小部件

Question

我在这里、pub.dev和flutter文档中搜索了，但是没有找到（或者没有表达清楚我的问题）解决这个简单任务的方法。

我想要显示一个字符串，其中的字母从上到下排列，同时保持字母的方向默认。所以旋转的Text()不起作用。

我期望的输出结果如下：

H
E
L   T
L   H
O   A
    N
W   K
O   S
R   ❤️
L
D

此外，我需要将 String 换行至下一行（在此情况下是列）。需要一个高度参数来限制每列从上到下的字母数量。

如果实现最后一部分太难，我可以考虑单列解决方案的想法。

- aytunch

Answer 1

截图：

---

代码：

// Create a custom widget like this
class MyVerticalText extends StatelessWidget {
  final String text;

  const MyVerticalText(this.text);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      runSpacing: 30,
      direction: Axis.vertical,
      alignment: WrapAlignment.center,
      children: text.split("").map((string) => Text(string, style: TextStyle(fontSize: 22))).toList(),
    );
  }
}

并像这样使用：

MyVerticalText("HELLO WORLD THANKS❤️")

- CopsOnRoad

---

哇！看起来很棒，而且代码如此简洁。我会尽快尝试它。在尝试代码之前有一个问题：您认为每个字母都成为“Text”小部件会导致任何性能问题吗？ - aytunch

这取决于你的字符串长度，如果你传递的是10-20个字母，那么使用Wrap就可以了，但如果你有100多个字母，我建议你使用ListView而不是Wrap，但这可能不适合你的UI，因为它会产生滚动效果，这完全取决于你的用例。 - CopsOnRoad

实际上，我将在ListView元素内使用这些垂直文本。因此，每个ListView项目最多有2个单词。而且一次屏幕上最多只有10个项目。 - aytunch

那就没问题了。你可以继续进行，但是有一个性能提示，不要使用那个方法，将其转换为StatelessWidget类。如果你不知道如何转换，请告诉我，我会更新帖子。 - CopsOnRoad