如何让多个Jetpack Compose元素随屏幕/父布局约束共同缩放？

我已经完成了Android官方的骰子滚轮应用教程，现有代码如下：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.tl.dicetut.ui.theme.DiceTutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceTutTheme{
                DiceRollerApp()
            }
        }
    }
}

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier){
    var result: Int by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString(),
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {result = (1..6).random()}) {
            Text(stringResource(id = R.string.roll))
        }
    }
}

当前渲染效果：

目前已知：

• .fillMaxSize() + .wrapContentSize(Alignment.Center) 作用是让Column占据整个屏幕约束，并将子元素对齐到约束区域中心
• 骰子图片的宽高在资源文件中设为200dp×250dp，这决定了当前的渲染尺寸
• 给图片添加Modifier.fillMaxWidth() + ContentScale.Crop可以将其缩放至屏幕宽度，但按钮不会随之缩放，无法保持二者初始比例
• 尝试过给Column添加Modifier.scale(float)来同时缩放两个组件，但该方法无法根据屏幕约束自动适配缩放

请问实现这种多组件共同按比例适配屏幕缩放的正确方式是什么？

解决方案 #

核心思路是：先让基准组件（骰子图片）根据屏幕约束适配缩放，再根据初始比例计算其他组件（按钮）的尺寸，避免使用scale（仅视觉缩放，不改变布局占位和触摸区域）。以下是几种可行方式：

方式1：使用ConstraintLayout配置比例约束 #

通过ConstraintLayout关联图片和按钮的尺寸比例，确保按钮始终和图片保持固定比例：

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    ConstraintLayout(modifier = modifier.fillMaxSize()) {
        val (image, spacer, button) = createRefs()

        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString(),
            modifier = Modifier
                .fillMaxWidth(0.8f) // 图片占屏幕宽度的80%，可按需调整
                .constrainAs(image) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    centerHorizontallyTo(parent)
                }
        )

        Spacer(
            modifier = Modifier
                .height(16.dp)
                .constrainAs(spacer) {
                    top.linkTo(image.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )

        Button(
            onClick = { result = (1..6).random() },
            modifier = Modifier
                .constrainAs(button) {
                    top.linkTo(spacer.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    width = Dimension.percent(0.4f) // 按钮宽度设为图片宽度的40%，匹配初始200dp图片对应80dp按钮的比例
                    centerHorizontallyTo(parent)
                }
        ) {
            Text(stringResource(id = R.string.roll))
        }
    }
}

方式2：自定义Layout精确控制尺寸比例 #

通过自定义Layout组件，根据父容器约束计算子元素的适配尺寸：

@Composable
fun ScalableDiceLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier.fillMaxSize(),
        content = content
    ) { measurables, constraints ->
        // 按顺序取图片、间隔、按钮的可测量对象
        val imageMeasurable = measurables[0]
        val spacerMeasurable = measurables[1]
        val buttonMeasurable = measurables[2]

        // 计算图片最大可用宽度（留20dp左右边距）
        val maxImageWidth = constraints.maxWidth - 40.dp.roundToPx()
        // 初始图片宽高比为200:250=4:5
        val imageAspectRatio = 4f / 5f
        val imageWidth = maxImageWidth
        val imageHeight = (imageWidth / imageAspectRatio).toInt()

        // 测量各组件
        val imagePlaceable = imageMeasurable.measure(Constraints.fixed(imageWidth, imageHeight))
        val spacerPlaceable = spacerMeasurable.measure(constraints)
        // 按钮宽度按图片宽度的40%计算，保持初始比例
        val buttonWidth = (imageWidth * 0.4f).toInt()
        val buttonPlaceable = buttonMeasurable.measure(Constraints.fixedWidth(buttonWidth))

        // 计算总高度并居中布局
        val totalHeight = imagePlaceable.height + spacerPlaceable.height + buttonPlaceable.height
        val yOffset = (constraints.maxHeight - totalHeight) / 2

        layout(constraints.maxWidth, constraints.maxHeight) {
            imagePlaceable.place((constraints.maxWidth - imageWidth)/2, yOffset)
            spacerPlaceable.place((constraints.maxWidth - spacerPlaceable.width)/2, yOffset + imagePlaceable.height)
            buttonPlaceable.place((constraints.maxWidth - buttonWidth)/2, yOffset + imagePlaceable.height + spacerPlaceable.height)
        }
    }
}

// 使用自定义Layout的示例
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    ScalableDiceLayout(modifier = modifier) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(id = R.string.roll))
        }
    }
}

方式3：给Column添加自定义layout修饰符 #

通过自定义layout逻辑，根据图片的缩放尺寸调整按钮大小：

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
            .layout { measurable, constraints ->
                val originalPlaceables = measurable.measure(constraints)
                // 获取图片和按钮的占位对象
                val imagePlaceable = originalPlaceables[0]
                val spacerPlaceable = originalPlaceables[1]
                // 按初始比例（200dp图片对应80dp按钮）计算按钮目标宽度
                val targetButtonWidth = (imagePlaceable.width * 0.4f).toInt()
                // 重新测量按钮
                val resizedButton = measurable[2].measure(Constraints.fixedWidth(targetButtonWidth))

                // 计算总尺寸并居中布局
                val totalWidth = maxOf(imagePlaceable.width, resizedButton.width)
                val totalHeight = imagePlaceable.height + spacerPlaceable.height + resizedButton.height

                layout(totalWidth, totalHeight) {
                    imagePlaceable.place((totalWidth - imagePlaceable.width)/2, 0)
                    spacerPlaceable.place((totalWidth - spacerPlaceable.width)/2, imagePlaceable.height)
                    resizedButton.place((totalWidth - resizedButton.width)/2, imagePlaceable.height + spacerPlaceable.height)
                }
            },
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString(),
            modifier = Modifier.fillMaxWidth(0.8f)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(id = R.string.roll))
        }
    }
}

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