如何让Jetpack Compose自定义组合函数内的元素适配屏幕尺寸？

核心问题是你的自定义组合函数ShowCurrentRound没有接收到足够的布局约束，导致内部元素无法利用可用空间。直接放在主Column里时，元素能继承主Column的fillMaxSize约束，但封装到函数后默认没有传递这些约束，调整以下两点即可解决：

1. 让自定义函数接收Modifier参数 #

给ShowCurrentRound添加Modifier参数，这样主函数可以把布局权重、尺寸约束传递进去，让中间区域能利用剩余空间：

@Composable
fun ShowCurrentRound(round: GameRound, modifier: Modifier = Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top,
        modifier = modifier
    ) {
        Text(
            text = "Round ${round.current}",
            color = Color.Black
        )
        
        Spacer(modifier = Modifier.height(30.dp))
        
        Image(
            painter = painterResource(id = R.drawable.roundPlaceholder),
            contentDescription = "Cover",
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .border(color = Color.Black, width = 1.dp)
                .fillMaxWidth() // 让图片占满可用宽度
                .aspectRatio(1f) // 保持宽高比，可根据需求调整数值
        )
        
        Spacer(modifier = Modifier.height(10.dp))
        
        Text(
            text = "${round.title}",
            color = Color.Black,
            fontWeight = FontWeight.Bold
        )
    }
}

2. 在主函数调用时传递权重Modifier #

主Column里，给ShowCurrentRound添加Modifier.weight(1f)，让它自动填充顶部图片和底部按钮之间的剩余空间：

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Top,
    modifier = Modifier
        .background(backgroundGradient)
        .fillMaxSize()
) {
    Image(
        [...] // 你的顶部图片代码
    )

    // 传递weight modifier让中间区域占满剩余空间
    ShowCurrentRound(currentGame.currentRound, Modifier.weight(1f)) 

    Spacer(modifier = Modifier.height(30.dp))
    
    Button(onClick = { /*TODO*/ }) {
        Text(text = "Next round")
    }
    Spacer(modifier = Modifier.height(30.dp))
}

原理说明 #

• Modifier.weight(1f)会告诉Compose，该组件要占据Column中所有未被其他元素（顶部图片、底部按钮、Spacer）占用的空间。
• 自定义函数内的Column应用这个Modifier后，内部元素就能拿到正确的可用空间约束，图片通过fillMaxWidth()配合aspectRatio或ContentScale.Fit，就能适配屏幕尺寸且保持比例。

如果需要图片在垂直方向也尽可能利用空间，可将图片的Modifier改为.fillMaxSize()，同时注意结合ContentScale.Fit避免拉伸变形，调整Column的verticalArrangement（比如Arrangement.Center）来优化元素位置。

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