flutter - Flutter 的垂直文本小部件

TextDirection文档说:

Flutter is designed to address the needs of applications written in any of the world's currently-used languages, whether they use a right-to-left or left-to-right writing direction. Flutter does not support other writing modes, such as vertical text or boustrophedon text, as these are rarely used in computer programs. (emphasis added)

Flutter 不仅不支持竖排文字, future 也不会正式支持。这是一个早期的设计决定(见 here 和 here)。

即便如此,如今垂直脚本支持仍有实际用途。除了某些 Chinese and Japanese使用,traditional Mongolian script需要它。该脚本在内蒙古的计算机程序中非常常用(example、example、example、example、example、example)。

从上到下书写,从左到右换行:

此外,表情符号和 CJK 字符在垂直显示时保持其方向(不是绝对必要,但首选)。在下图中,顶部段落显示了当前的实现,底部段落显示了正确的垂直渲染:

// sample text
ᠨᠢᠭᠡ ᠬᠣᠶᠠᠷ ᠭᠣᠷᠪᠠ ᠳᠥᠷᠪᠡ ᠲᠠᠪᠤ ᠵᠢᠷᠭᠤᠭ᠎ᠠ ᠳᠣᠯᠣᠭ᠎ᠠ ᠨᠠ‍ᠢᠮᠠ ᠶᠢᠰᠦ ᠠᠷᠪᠠ one two three four five six seven eight nine ten ??汉字 한국어 モンゴル語 English? ᠮᠣᠩᠭᠣᠯ︖

由于 Flutter 不支持竖排脚本,所以必须从头开始实现。所有实际的文本布局和绘画都在 Flutter 引擎中完成,LibTxt ,所以我无法改变它。

创建一个从上到下的垂直文本小部件会涉及什么?

更新

我仍在寻找答案。 Rémi 的答案适用于单行文本,但不适用于多行文本。

我目前正在研究三种不同的可能解决方案:

  • 创建一个 RenderObject 子类(或者可能是 RenderParagraph 子类),它支持类似于 RichText 小部件的自定义 StatelessWidget。
  • 使用 CustomPaint 小部件
  • 制作 ListView(每行一行)、Text 小部件和 WidgetSpans 的复合小部件。

所有这些都涉及测量文本、布置文本和获取行列表。

另一个更新

我目前倾向于制作一个自定义小部件和渲染对象,以模仿 RichText 和 RenderParagraph。在底层 RenderParagraph 使用 TextPainter 来布局和绘制文本。我现在的问题是 TextPainter 与底层的 Skia LibTxt 库紧密耦合。那是所有实际布局和绘画发生的地方。事实证明,在默认 ltr 和 rtl 之外的任何地方布置文本都是一个大问题。

又一次更新

接受的答案符合我在这个问题中提出的标准。我认为这将满足短期需求。我对应用文本样式之类的事情有一些保留,但我需要做更多的测试。从长远来看,我可能仍会尝试自定义文本布局和绘画。

最佳答案

使用 RotatedBox 可以实现横向文本,这足以让文本按照您的预期正确换行。

Row(
  children: <Widget>[
    RotatedBox(
      quarterTurns: 1,
      child: Text(sample),
    ),
    Expanded(child: Text(sample)),
    RotatedBox(
      quarterTurns: -1,
      child: Text(sample),
    ),
  ],
),

同样,Flutter 现在支持文本内的内联小部件。这可用于在文本中旋转笑脸。

RotatedBox(
  quarterTurns: 1,
  child: RichText(
    text: TextSpan(
      text: 'Hello World',
      style: DefaultTextStyle.of(context).style,
      children: [
        WidgetSpan(
          child: RotatedBox(quarterTurns: -1, child: Text('?')),
        )
      ],
    ),
  ),
),

https://stackoverflow.com/questions/56782788/

相关文章:

android - 如何在 TextFormField 中显示/隐藏密码?

android - flutter : How can I add divider between

flutter - 有没有办法在 Flutter 中扫描条形码?

android - Flutter - setState 不更新内部有状态小部件

android - [Flutter]中如何打开PDF或word文档

dart - Flutter BLoC 模式 - 如何在流事件后导航到另一个屏幕?

dart - Flutter:在 StatelessWidget 中哪里添加监听器?

image - 如何使用 Flutter 将 BASE64 字符串转换为 Image?

dart - 在 Flutter 中设置环境变量

dart - 如何在 flutter 中实现推送通知