在圆内包裹文字(颤动)

Luk*_*tti 5 flutter flutter-layout

可以在Flutter中将文本换成一个圆形吗?这是一个失败的例子。理想情况下,文本将适合圆圈,并且仅在末尾溢出。

ClipOval(
  child: SizedBox.expand(
    child: Text(
      "Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. ",
      softWrap: true,
      overflow: TextOverflow.fade,
    ),
  ),
),
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

Gar*_*ian 6

截至目前(2019 年 7 月),Flutter 不直接支持以非矩形形状布置文本。

使用现有的 API,应该可以通过实现以下步骤来实现类似的自定义效果:

  • 创建一个列。
  • 在第 1 行以圆形宽度布局单行文本
  • 获取最后一个布局字符的字符索引(使用 getBoxesForRange 和 getPositionForOffset)
  • 截断要在索引处布局的文本的前面以获得剩余文本。
  • 将剩下的文本排成一行文本,在第 2 行以圆形为宽度。第 2 行的 y 位置可以通过添加单行 1 的高度获得。
  • 重复直到不再填充文本或圆圈。将列中的所有文本居中放置。

那应该能让你接近一些东西。该实现将必须处理每个 y 位置的圆宽度的所有计算以及手动定位每行文本。