我可以使用Compose在0和包裹内容值之间进行动画。

huangapple go评论71阅读模式
英文:

How can I animate between 0 and wrap content values ​using compose

问题

我正在尝试使用Compose制作一个滑动以显示组件,但我希望在滑动后出现的卡片的宽度能够根据内容自动增长,而不使用固定值,但我不明白如何计算包裹内容的大小。

如何将此处使用的宽度值等同于包裹内容的值?

英文:

I'm trying to make a swipe to reveal component using compose, but I want the width of the card that will appear after the swipe to grow to the size of the wrap content without using it, but I don't understand how to calculate the wrap content size.

var width by remember {
        mutableStateOf(0.dp)
    }
    val lowerTransition = updateTransition(transitionState, "lowerCardTransition")
    val lowerOffsetTransition by lowerTransition.animateFloat(
        label = "lowerCardOffsetTransition",
        transitionSpec = { tween(durationMillis = ANIMATION_DURATION) },
        targetValueByState = { if (isRevealed) width.value else 0f },

)

How do I equate the width value used here to the wrap content value?

我可以使用Compose在0和包裹内容值之间进行动画。
I'm trying to make the resulting delete button appear all without using a constant value

答案1

得分: 1

尝试使用AnimatedVisibility。出于演示目的,我使用了OnClick,将其替换为OnSwipe。

@Preview
@Composable
fun AnimateVisibility2() {
    var visible by remember {
        mutableStateOf(false)
    }
    Row(
        modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            visible = visible, enter = expandHorizontally(), exit = shrinkHorizontally()
        ) {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Phone, contentDescription = null)
            }
        }

        Button(onClick = { visible = !visible }, Modifier.weight(1f)) {
            Text("点击我")
        }
    }
}
英文:

Try using AnimatedVisibility. For demo purpose I used OnClick, replace it with OnSwipe.

@Preview
@Composable
fun AnimateVisibility2() {
    var visible by remember {
        mutableStateOf(false)
    }
    Row(
        modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            visible = visible, enter = expandHorizontally(), exit = shrinkHorizontally()
        ) {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Phone, contentDescription = null)
            }
        }

        Button(onClick = { visible = !visible }, Modifier.weight(1f)) {
            Text("Click Me")
        }
    }
}

huangapple
  • 本文由 发表于 2023年1月8日 21:47:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75048247.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定