将卡片置于另一张布局上

Question

我一直在尝试在jet compose android中设置卡片，其方式是将一半放置在一个布局上，另一半放置在其他布局上，如下图所示

到目前为止我已经尝试过以下代码

@Composable
fun HomeUI(modifier: Modifier = Modifier) {
Column {
    Box(
        modifier = modifier
            .background(colorResource(id = R.color.colorPrimary))
            .defaultMinSize(minHeight = 150.dp)
            .fillMaxWidth()
    ) {
        Text(
            text = "Sign Up",
            color = colorResource(id = R.color.white),
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
        Row(modifier = Modifier.align(Alignment.BottomStart)) {
            for (i in 1..3) {
                Card(
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    ),
                ) {
                    Column {
                        Image(
                            modifier = Modifier
                                .align(Alignment.CenterHorizontally)
                                .padding(5.dp),
                            painter = painterResource(id = R.drawable.sedan),
                            contentDescription = "City Rides",
                        )
                        Text(
                            text = "City Rides",
                            modifier = Modifier
                                .padding(16.dp)
                                .align(Alignment.CenterHorizontally),
                            textAlign = TextAlign.Center,
                        )
                    }

                }
            }
        }
    }
}

}

但无法实现同样的目标。请给一些建议！

这是我的结果

Answer 1

您可以从

Row

范围中删除

Box

可组合项并将其放置在其下方，即直接在

Column

范围内并应用负值

Y-Offset

:

@Composable
fun HomeUI(modifier: Modifier = Modifier) {
    Column {
        Box(
            modifier = modifier
                .background(colorResource(id = R.color.black))
                .defaultMinSize(minHeight = 150.dp)
                .fillMaxWidth()
        ) {
            Text(
                text = "Sign Up",
                color = colorResource(id = R.color.white),
                modifier = Modifier
                    .padding(16.dp),
                textAlign = TextAlign.Center,
            )
        }
        Row(
            modifier = Modifier.fillMaxWidth().offset(y = -(60.dp)),
            horizontalArrangement = Arrangement.Center
        ) {
            for (i in 1..3) {
                Card(
                    modifier = Modifier
                        .padding(8.dp)
                        .size(100.dp),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    ),
                ) {
                    Column {
                        Image(
                            modifier = Modifier
                                .align(Alignment.CenterHorizontally)
                                .padding(5.dp),
                            painter = painterResource(id = R.drawable.ic_battery_50),
                            contentDescription = "City Rides",
                        )
                        Text(
                            text = "City Rides",
                            modifier = Modifier
                                .padding(16.dp)
                                .align(Alignment.CenterHorizontally),
                            textAlign = TextAlign.Center,
                        )
                    }

                }
            }
        }
    }
}

示例输出：https://drive.google.com/file/d/1TpIYSJ-hXZV4B8CaRvyembsTO-F5Qnu6/view?usp=sharing