如何在 Jetpack Compose 中将 Row 中的两个极端元素分别向左和向右对齐？

Question

我在 Jetpack Compose 中有一个 CardOption 组件：

@Composable
fun CardOption(text: String) {
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Title

        @OptIn(ExperimentalTextApi::class)
        val fontFamily =
            FontFamily(
                Font(
                    R.font.sfprotextbold,
//                        variationSettings = FontVariation.Settings(
//                            FontVariation.weight(950),
//                            FontVariation.width(30f),
//                            FontVariation.slant(-6f),
//                        )
                )
            )
        val textStyle = TextStyle(
            fontFamily = fontFamily
        )

        Divider(
            color = Color.LightGray, // You can change the color as needed
            thickness = 1.dp, // You can adjust the thickness as needed
            modifier = Modifier.fillMaxWidth()
        )

        OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    color = Color.Transparent
                )
                .height(100.dp),
            shape = RectangleShape,
            onClick = {
            }
        ) {
            Row(modifier = Modifier.fillMaxWidth()
                                    .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween) {

                Image(
                    painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
                    contentDescription = null, // Provide an appropriate content description
                    modifier = Modifier
                        .size(200.dp)
                )


                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = text,
                    fontSize = 15.sp,
                    style=textStyle
                )
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = ">",
                    fontSize = 15.sp,
                    style=textStyle
                )
            }
        }

        Divider(
            color = Color.LightGray, // You can change the color as needed
            thickness = 1.dp, // You can adjust the thickness as needed
            modifier = Modifier.fillMaxWidth()
        )

    }
}

它在 UI 上的渲染如下：

但是，我希望图像与最左端对齐（带有较小的填充），并且使右箭头（“>”）与最右端对齐。我尝试了各种安排：

1. 整理.开始
2. 排列.SpaceBetween
3. 排列.空间均匀
4. 安排结束

但没有任何效果。我怎样才能实现这个目标？

Answer 1

将两个文本组件放在单独的行中，如下所示：

        Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        Image(
            painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
            contentDescription = null, // Provide an appropriate content description
            modifier = Modifier
                .size(200.dp)
        )


        Row {
            Text(
                modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                color = Color.Black,
                text = text,
                fontSize = 15.sp,
                style = textStyle
            )
            Text(
                modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                color = Color.Black,
                text = ">",
                fontSize = 15.sp,
                style = textStyle
            )
        }
    }