android - 撰写：创建带有圆形背景的文本

Question

来自 SwiftUI，我想创建一个Text具有圆形背景的视图，其中圆形的宽度/高度随着内部文本的Text变长而增长。

由于Circle()在 Compose 中没有像在 中那样SwifUI，所以我只创建了一个Spacer并剪裁了它。使用下面的代码是ConstraintLayout因为我不知道如何获得宽度Text以便将Circle可组合的大小设置为相同：

@Composable
fun CircleDemo() {
    ConstraintLayout {
        val (circle, text) = createRefs()

        Spacer(
            modifier = Modifier
                .background(Color.Black)
                .constrainAs(circle) {
                    centerTo(text)
                }
        )

        Text(
            text = "Hello",
            color = Color.White,
            modifier = Modifier
                .constrainAs(text) {
                    centerTo(parent)
                }
        )
    }
}

我可以使用我在附加到的修饰符mutableStateOf { 0 }中更新它的位置，然后将其设置为 的，但是 1. 这似乎很愚蠢， 2.现在画在 . 的边界之外。onGloballyPositionedTextrequiredSizeSpacerSpacerConstraintLayout

视觉上我想实现这一点：

我该怎么做呢？谢谢 ：）

Answer 1

您可以使用CircleShape.
您可以使用 a 作为背景包装Text并Box使用CircleShape修饰符layout来调整Box当前文本的尺寸。

就像是：

Box(contentAlignment= Alignment.Center,
    modifier = Modifier
        .background(Color.Black, shape = CircleShape)
        .layout(){ measurable, constraints ->
            // Measure the composable
            val placeable = measurable.measure(constraints)

            //get the current max dimension to assign width=height
            val currentHeight = placeable.height
            var heightCircle = currentHeight
            if (placeable.width > heightCircle)
                heightCircle = placeable.width

            //assign the dimension and the center position
            layout(heightCircle, heightCircle) {
                // Where the composable gets placed
                placeable.placeRelative(0, (heightCircle-currentHeight)/2)
            }
        }) {

    Text(
        text = "Hello World",
        textAlign = TextAlign.Center,
        color = Color.White,
        modifier = Modifier.padding(4.dp).defaultMinSize(24.dp) //Use a min size for short text.
    )
}

Answer 2

在透明颜色内使用黑色圆圈的背景可绘制对象。背景可绘制将拉伸以填充视图，并且圆圈应该很好地拉伸而不会产生伪影。