问如何在Jetpack组合中悬停时按行缩放项目
EN

Stack Overflow用户

提问于 2022-06-20 00:11:59

回答 1查看 134关注 0票数 0

我正在用jetpack compose重新创建facebook的反应。现在有一个问题，我如何能够检测到什么时候悬停在一个项目上，并缩放它？更清楚的是，我正在创建这。我重新使用弹出式弹出式飞机组成，那部分是好的。但是，在行上拖动/悬停不确定如何缩放图像。有什么建议或帮助吗？

android

android-jetpack-compose

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-20 08:42:00

我为你做了这个初步的实现。我希望你能在这里继续执行：

@ExperimentalComposeUiApi
@Composable
fun ReactionsComponent() {
    val density = LocalDensity.current
    var selectedIndex by remember {
        mutableStateOf(-1)
    }
    val iconSize = 48.dp
    val boxPadding = 8.dp
    val iconSizePx = with(density) { iconSize.toPx() }
    val boxPaddingPx = with(density) { boxPadding.toPx() }
    val increaseSize = iconSize.times(2f)
    val icons = listOf(
        Icons.Default.Favorite,
        Icons.Default.Star,
        Icons.Default.Call,
        Icons.Default.AccountBox,
        Icons.Default.ThumbUp
    )
    Box(
        Modifier
            .height(increaseSize)
            .width(IntrinsicSize.Min)
            .pointerInteropFilter {
                val selection = ((it.x - boxPaddingPx) / iconSizePx).toInt()
                if (selection >= icons.size || selection < 0 || it.x < boxPaddingPx) {
                    selectedIndex = -1
                } else if (it.action == MotionEvent.ACTION_UP) {
                    selectedIndex = -1 // finger released
                } else {
                    selectedIndex = selection
                }
                true
            }
    ) {
        Box(
            Modifier
                .align(Alignment.BottomStart)
                .fillMaxWidth()
                .height(iconSize + boxPadding.times(2))
                .background(Color.LightGray, CircleShape)
        )
        Row(
            Modifier
                .align(Alignment.BottomStart)
                .width(IntrinsicSize.Min)
                .padding(boxPadding),
            verticalAlignment = Alignment.Bottom
        ) {
            icons.forEachIndexed { index, icon ->
                val size = if (selectedIndex == index) increaseSize else iconSize
                Box(
                    Modifier
                        .border(1.dp, Color.LightGray, CircleShape)
                        .background(Color.White, CircleShape)
                        .height(animateDpAsState(size).value)
                        .width(animateDpAsState(size).value)
                ) {
                    Icon(
                        icon,
                        contentDescription = null,
                        tint = Color.Magenta,
                        modifier = Modifier.fillMaxSize().padding(8.dp)
                    )
                }
            }
        }
    }
}