只允许在 Flutter 中的单词边界处换行

Question

如果没有足够的空间在一行中显示它，我在使用 Flutters Text 小部件将文本包装在奇怪的位置时遇到了一些问题：

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
       Text("Ready to Grow? Click to join the Tribe!",
       style: Theme.of(context).textTheme.headline2,
       textAlign: TextAlign.center,
       )
    ],
  ),
)

在某些情况下，我的文本换行如下：

Ready to Grow? Click to join the Tribe
!

这看起来很丑陋，我希望 Flutter 只在空白处换行 - 我怎样才能做到这一点？我已经尝试过 softWrap 和 overflow 属性，但它们似乎对所描述的行为没有任何影响......

真实世界截图（注意最底部的尾随“！”）：

Answer 1

我觉得你会问这个问题很有趣，因为我看到很多人抱怨相反！总的来说，Flutter 对“只在边界处换行”非常激进，几乎太严格了，所以我听到的抱怨通常是：“如何让 Flutter 改变 line mid-word”。

为了说明我的意思，请看下面的 GIF：

从 GIF 中我们可以观察到，Flutter 已经处理了“文本！”和“边界！”作为单个单词。它尽最大努力避免在字母和“！”之间断开。标记。需要时，它会加上整个词“边界！”进入自己的行。

但是，当屏幕尺寸太窄时，它不可能固定整个单词（再次，“边界！”被视为单个单词），它必须打破它。根据屏幕大小，换行可能在任何时候发生。

总的来说，Flutter 在这方面做得非常好。您可以尝试以一种避免使用比典型屏幕宽度更长的字词的方式设计您的 UI 和起草您的副本。