编写Android标签以圈出

sirbozc5 于 2023-05-15 发布在 Android

关注(0)|答案(1)|浏览(113)

我试图创建一个标签，将作为一个标签添加时，添加一个新的项目，所以我想这个标签把文本“新”，并在4秒后，它转换成一个圆圈的标签（作为一个通知徽章图标）我已经尝试过的是：

@Composable
internal fun AnimatedNewLabel() {
    var showText by remember { mutableStateOf("New") }
    var padding by remember { mutableStateOf(8.dp) }
    Text(
        modifier = Modifier
            .drawBehind {
                drawCircle(
                    color = Color.Red,
                    radius = this.size.maxDimension,
                )
            }
            .padding(start = 8.dp, top = 8.dp, end = 12.dp, bottom = 8.dp),
        text = showText,
        textAlign = TextAlign.Center,
        maxLines = 1,
        fontSize = 14.sp,
        lineHeight = 20.sp,
        fontWeight = FontWeight.Normal,
    )
    LaunchedEffect(Unit) {
        delay(4000)
        showText = ""
        padding = 0.dp
    }
}

但是看起来并不顺利，有没有其他的方法来做到这一点？我已经检查过autoseText也有一个修饰符，但不知道这是否是他们使用的方式。

android

来源：https://stackoverflow.com/questions/76219430/compose-android-label-to-circle

1条答案

按热度按时间

qnzebej01#

要使其平滑，您必须使用“合成”的动画辅助工具来设置大小或颜色的动画。这个Codelab Animation in Compose很棒。
这有点难以理解你的要求，但这是一个文本动画平滑到一个圆圈的例子，根据你的需要进行调整：animateDpAsState将动态显示0到40的dp大小。

@Composable
fun LabelCircle() {
    var showText by remember { mutableStateOf(true) }
    LaunchedEffect(Unit) {
        delay(4000)
        showText = false
    }

    val circleSize by animateDpAsState(
        targetValue = if (showText) 0.dp else 40.dp,
        animationSpec = spring(),
    )
    Box(
        modifier = Modifier.size(40.dp),
        contentAlignment = Alignment.Center,
    ) {
        if (showText) {
            Text("New")
        }
        Box(
            modifier = Modifier.clip(CircleShape).size(circleSize).background(Color.Red),
        ) {
        }
    }
}

赞(0）回复(0）举报 2023-05-15

我来回答

编写Android标签以圈出

1条答案

相关问题

热门标签

最新问答