在 Compose 中将内容包装到具有剪裁形状的文本？答案

【问题标题】：Wrap content to a text with clipped shape in Compose?在 Compose 中将内容包装到具有剪裁形状的文本？
【发布时间】：2021-07-04 22:52:32
【问题描述】：

我有一个文本撰写，我想在上面应用一个三角形，我成功应用了三角形，但文本没有包裹在三角形内，似乎该形状没有将视图切割成三角形, 它只在它上面或类似的东西上绘制。

代码如下：

Text(
 modifier = Modifier
       .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
               listOf(
                  Color(0xff4F0D37),
                  Color(0xffD73046)
                 )
               )
            ),
  text = "150",
  color = Color.White,
)

任何提示将不胜感激:)

【问题讨论】：

您想如何将文本剪辑成三角形？减小字体大小还是增加形状大小？
以一致的方式增加形状的大小。

标签： android android-jetpack-compose

【解决方案1】：

我是这样做的：

Text(
    modifier = Modifier
        .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
                listOf(
                    Color(0xff4F0D37),
                    Color(0xffD73046)
                )
            )
        )
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)

            layout(placeable.width * 2, placeable.height * 2) {
                placeable.placeRelative(0, 0)
            }
        },
    text = "150",
    color = Color.White,
)

我使用layout lambda 表达式将可组合对象的宽度和高度加倍，同时保持其他一切不变。对行和列进行了一些处理，但我认为这是一个合适的解决方案。

结果如下：

【讨论】：

谢谢，但是当数字变大时，形状的宽度会增加很多，有没有办法让形状看起来与任何数字一致？
我明白了，假设数字是 1000000000，你希望这个形状是什么样的？为了正确显示它，我的意思是包含在三角形中并且仍然可见，这是要走的路（我的意思是几何方面）
我想在宽度增加时增加高度（不知何故），这样三角形就不会失去形状。让我们假设值是“100”然后 -> 宽度 = 36 和高度 = 30 所以形状看起来不错，但是当值是“100000”时 -> 在这种情况下，宽度 = 100 和高度 = 30形状。换句话说，我需要一种在宽度增加时增加高度以保持形状看起来不错的方法。
您可以在“layout(placeable.width * 2, placeable.height * 2)”行中随意更改高度，只需将高度替换为您需要的任何值。您的描述不够简洁，我无法为您提供适当的解决方案。您可以预先定义您希望三角形具有的角度，然后以顶线为底线，计算高度以获得您想要的精确角度。

【解决方案2】：

BoxWithConstraints{
val constraints = size
Text(
    modifier = Modifier
        .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
                listOf(
                    Color(0xff4F0D37),
                    Color(0xffD73046)
                )
            )
        ),
    text = "150",
    color = Color.White,
    fontSize = (constraints.width / 2) // ... Modify if necessary
)
}

这里我使用的是 BoxWithConstraints 公开的size 参数。这是框的大小，我将其存储在一个变量中，以便稍后重新使用以相应地设置文本的字体大小。文本定位可以轻松完成。使用 Modifier.align(TopStart)

【讨论】：

你能解释一下吗？
我想根据内容大小调整形状，我不想改变文本的字体大小，抱歉，您的回答我不清楚。
那么，MichaelThePotatoe 的回答有什么问题？高度和宽度将被平均缩放，所以它不应该扭曲形状，这就是我的想法。
问题是当数字变大如“100000”时，文本的宽度会比高度大很多，因此三角形会不一致。