表面宽度可调，可以将卡片并排放置

Question

想到一种在屏幕底部发牌的方法，我知道我需要计算偏移量，以便将牌放在一起。 有没有一种方法可以触发我发牌时对 space 进行评估（记住）并调整牌数，以便进行适当的抵消？ 我拍了一些我想要达到的目标的照片（模型） 1 card 2 cards 甚至更多模型 3 cards 4 cards

@Composable
fun ScreenContent() {
    val width = (Resources.getSystem().displayMetrics.widthPixels / Resources.getSystem().displayMetrics.density).roundToInt()
    val height = (Resources.getSystem().displayMetrics.heightPixels / Resources.getSystem().displayMetrics.density).roundToInt()
    val offset = (width / 6)
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        CustomColumnSurface(1f) {}
        CustomColumnSurface(3f, color = Color.White, padding = 16.dp) {
            Row(
                modifier = Modifier
                    .fillMaxWidth(),
            ) {
                CustomRowSurface(1f) {}
                CustomRowSurface(1f) {}
                CustomRowSurface(1f) {}
            }
        }
        CustomColumnSurface(1f) {
            val painter = painterResource(id = R.drawable.clubs_2)
            val description = "clubs 2"
            val last = 1
            var space = (width/(last+1))-((135*last)/2)
            println(space)
            for (i in 1..last) {
                Box(modifier = Modifier
                    //.fillMaxHeight()
                    .offset(space.dp)
                ) {
                    ImageCard(
                        painter = painter,
                        contentDescription = description,
                    )
                }
                //space += (last*(135/2))
            }
        }
    }
}

Answer 1

我找到了适合你的解决方案...

val cardCounter = // number of cards you need to show.
Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
    repeat(cardCounter) {
        val singleCardOffset = 30 // card width / 2
        val totalOffset = singleCardOffset * (cardCounter - 1) / 2
        Box(
            Modifier
                .offset(x = (-totalOffset + (it * singleCardOffset)).dp)
                .size(60.dp, 100.dp) // Hardcoded card size
                .background(colors[it]) // I'm using an array of colors, 
                                        // but you're going to use the card
                                        // background
        )
    }
}

结果如下：

您可以找到完整的来源 here。