Question

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

由于 Compose 中没有 Circle() 像 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 } 在附加到 onGloballyPositioned 的 Text 修饰符中更新它，然后将其设置为 requiredSize 的 Spacer ，但 1. 这看起来很愚蠢 2. Spacer 现在绘制到 ConstraintLayout 的边界之外。

在视觉上我想实现这一点：

我该怎么做？谢谢:)

Answer 1

使用 1.0.0（使用 1.0.0-beta06 测试）有 CircleShape。
您可以用 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

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

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

2 个答案: