在圆内包裹文字（颤动）

Question

是否可以在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,
    ),
  ),
),

Answer 1

截至目前（2019年7月），Flutter不直接支持以非矩形形式放置文本。

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

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

那应该能够使您接近。该实现将必须处理每个y位置处圆的宽度的所有计算，并手动定位每行文本。

Answer 2

小文本解决方案

我提出了这种解决方案，该解决方案非常适合小文本：

ClipOval(
    child: Container(
        height: 30.0,
        margin: const EdgeInsets.all(20),
        width:  price.length * 10.0,
        decoration: BoxDecoration(color: Colors.white70,
        border: Border.all(color: Color(0x00ffffff), width: 0.0),
            borderRadius: BorderRadius.all(Radius.elliptical(price.length * 10.0, 30))), // this line makes the coffee.
        child: Center(child:Text(price, style: const TextStyle(color: Color(0xff2200ff))))
)),

NB：0xff2200ff是蓝色，Colors.white70是背景颜色。

如果您希望形状非常像圆形，只需将30.0替换为text.length * 10.0作为容器的高度和边框半径。

对于那些想要使用长文本的解决方案的人，您可以采用我的解决方案并添加自己的函数，该函数将根据文本的长度创建圆形的文本（通过添加\ n来实现）。

我希望这会有所帮助。