Jetpack Compose中如何让Row内两端元素分别左右对齐？

问题场景 #

实现了如下CardOption组件，希望达成：图片靠左对齐（带少量内边距），右侧箭头">"完全靠右，但尝试多种Row排列方式均未实现预期效果。

@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()
        )

    }
}

原因分析 #

原代码将Image、文本、箭头作为三个独立元素放在同一Row中，使用SpaceBetween时会把剩余空间平均分配在三个元素之间，导致箭头无法完全靠右；其他排列方式也无法同时满足图片左对齐、箭头右对齐的需求。

解决方案 #

将Image和文本包裹在一个子Row中，让外层Row仅包含两个元素：左侧的图片+文本组合，以及右侧的箭头。外层Row保留SpaceBetween排列方式，即可实现图片靠左、箭头靠右的效果，同时给图片添加右侧内边距来满足"少量内边距"的要求。

完整修改后的CardOption代码 #

@Composable
fun CardOption(text: String) {
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = Modifier.fillMaxWidth()
    ) {
        @OptIn(ExperimentalTextApi::class)
        val fontFamily =
            FontFamily(
                Font(
                    R.font.sfprotextbold
                )
            )
        val textStyle = TextStyle(
            fontFamily = fontFamily
        )

        Divider(
            color = Color.LightGray,
            thickness = 1.dp,
            modifier = Modifier.fillMaxWidth()
        )

        OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier
                .fillMaxWidth()
                .background(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
            ) {
                // 左侧组合：图片 + 文本
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Image(
                        painter = painterResource(id = R.drawable.black_credit_card),
                        contentDescription = "Credit card icon",
                        modifier = Modifier
                            .size(200.dp)
                            .padding(end = 16.dp) // 图片右侧添加内边距
                    )
                    Text(
                        modifier = Modifier,
                        color = Color.Black,
                        text = text,
                        fontSize = 15.sp,
                        style = textStyle
                    )
                }
                // 右侧箭头
                Text(
                    modifier = Modifier,
                    color = Color.Black,
                    text = ">",
                    fontSize = 15.sp,
                    style = textStyle
                )
            }
        }

        Divider(
            color = Color.LightGray,
            thickness = 1.dp,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

关键修改说明 #

• 子Row包裹图片和文本，保证两者始终相邻排列
• 图片添加padding(end = 16.dp)实现与文本的间距（可根据需求调整数值）
• 外层Row的SpaceBetween会自动将左侧组合和右侧箭头分别对齐到行的两端，完美实现预期布局

内容的提问来源于stack exchange，提问作者nikhilbalwani