Flutter：垂直文本小部件答案

【问题标题】：Flutter: Vertical Text widgetFlutter：垂直文本小部件
【发布时间】：2020-02-07 04:24:22
【问题描述】：

我在这里查找了 pub.dev 和 Flutter 文档，但找不到（或无法说出我的查询）任何解决这个简单任务的方法。

我想显示一个String，它的字母从上到下，同时保持默认的字母方向。所以旋转的Text() 不起作用。

我想要的结果是这样的：

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

另外，我需要将String 换到下一行（在这种情况下为列）高度参数是必要的，以限制每列从上到下的字母数量。

如果最后一部分太难实现，我愿意接受单列解决方案的想法。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案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❤️")

【讨论】：

哇！看起来很棒，而且代码很少。我会尽快尝试。尝试代码之前的一个快速问题：您认为每个字母变成 Text 小部件都会导致任何性能问题吗？
这取决于您的字符串的长度，如果您传递 10-20 个字母，那么 Wrap 可以，但如果您说 100 多个字母，我建议您使用 ListView 而不是Wrap 但这可能不适合您的 UI，因为它会产生滚动效果，这完全取决于您的用例。
实际上我将在ListView 元素中使用这些垂直文本。所以每个 ListView 项目最多有 2 个单词。并且一次我们在屏幕上最多显示 10 个项目。
那应该没问题。您很高兴，但有一个性能提示，而不是使用该方法，而是将其转换为 StatelessWidget 类。如果您不知道如何转换，请告诉我，我会更新帖子。
很好的提示。十分简单。我会这样做的：）