Android Jetpack Compose中如何将图片置于行尾并保留指定尺寸

要让内Row里的两张图片分别在行首和行尾，核心是让内Row正确分配水平空间，以下是具体修改方案：

关键问题分析 #

• 原内Row设置了固定宽度360.dp，无法自适应外层容器宽度，导致空间分配失效
• 内Row未配置水平排列规则，默认从左到右紧凑排列，所以两张图片紧挨在一起
• 外层Row和内Row的高度、背景设置重复，造成布局冗余

修改后的代码 #

@Composable
fun OnBoardingScreen6(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(26.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {
        // Back icon at the top-left corner
        IconButton(
            onClick = {
                navController.popBackStack()
            },
            modifier = Modifier.padding(start = 8.dp, top = 8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                tint = Color(0xFF039be5)
            )
        }

        // Spacer between IconButton and Row
        Spacer(modifier = Modifier.height(20.dp))
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp) // 统一高度，避免内外Row高度冲突
                .background(color = Color(0xFF008746))
        ) {
            // 优化内Row：去掉固定宽度，设为填充满父容器，配置两端对齐
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
                horizontalArrangement = Arrangement.SpaceBetween // 关键：让子元素两端对齐
            ) {
                // Inner Row content
                Image(
                    painter = painterResource(id = R.drawable.check),
                    contentDescription = null,
                    modifier = Modifier.size(24.dp)
                )

                Image(
                    painter = painterResource(id = R.drawable.close),
                    contentDescription = null,
                    modifier = Modifier.size(24.dp)
                )
            }
        }

        // Spacer between Row and Texts
        Spacer(modifier = Modifier.height(10.dp))
        Row(modifier = Modifier
            .padding(start = 5.dp)
            .width(290.dp)
            .height(40.dp)) {
              Text(text = "All set", style = TextStyle())
        }
        Spacer(modifier = Modifier.height(10.dp))

        Text(
            text = "",
                    fontWeight = FontWeight.SemiBold,
            fontSize = 20.sp,
            modifier = Modifier.padding(start = 28.dp)
        )

        // Spacer to push the button to the bottom
        Spacer(modifier = Modifier.weight(1f))

        // Button centered at the bottom
        Button(
            onClick = {
                navController.navigate(Destinations.OnBoardingScreen5)
            },
            modifier = Modifier
                .width(120.dp)
                .padding(top = 50.dp, bottom = 40.dp)
                .height(50.dp),
            shape = RoundedCornerShape(percent = 50),
            colors = ButtonDefaults.buttonColors(Color(0xFF039be5))
        ) {
            Text(text = "Next", fontWeight = FontWeight.Bold, style = TextStyle(Color.White))
        }
    }
}

核心修改点 #

1. 内Row宽度改为fillMaxWidth()：让内Row占满外层Row的可用宽度，确保有足够空间分配给两端的图片
2. 添加horizontalArrangement = Arrangement.SpaceBetween：这是实现两端对齐的关键配置，会自动在两个子元素之间填充剩余空间
3. 移除冗余设置：删除内Row的固定高度和重复背景，统一使用外层Row的高度和背景，避免布局冲突

替代方案（若需中间保留自定义间距） #

如果不想用SpaceBetween，也可以在两张图片之间添加带权重的Spacer，强制将右侧图片推到行尾：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
) {
    Image(
        painter = painterResource(id = R.drawable.check),
        contentDescription = null,
        modifier = Modifier.size(24.dp)
    )

    // 用权重Spacer填充中间空间
    Spacer(modifier = Modifier.weight(1f))

    Image(
        painter = painterResource(id = R.drawable.close),
        contentDescription = null,
        modifier = Modifier.size(24.dp)
    )
}

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