Android Compose：如何按父组件比例设置偏移量？

你需要在自适应缩放的响应式图片的特定位置放置Composable组件，无法使用Modifier.offset(some_fixed_offset.dp)这类固定偏移量，希望实现类似Modifier.offset(10.percent)的百分比偏移效果，目前已有BoxWithConstraints和自定义Composable的初步思路，以下是两种更简便的实现方式：

方法一：利用BoxWithConstraints直接计算偏移 #

BoxWithConstraints可以直接获取父容器的实际尺寸，结合百分比计算偏移量，无需自定义Modifier，代码修改如下：

@Composable
fun GeneralPlaceHolder(modifier: Modifier = Modifier) {
    Box (
        modifier
            .background(Color.Red)
            .size(300.dp) // 尺寸改变时，黄色圆点会自动保持相对位置
            .padding(10.dp)
    ) {
        Box(modifier = Modifier
            .background(Color.Blue)
            .fillMaxSize()) {
            DaThing()
        }
    }
}

@Composable
fun DaThing() {
    BoxWithConstraints {
        Image(
            painter = painterResource(id = R.drawable.testgrid10x10),
            contentDescription = "",
            modifier = Modifier.fillMaxSize()
        )
        // 按10%比例计算偏移量
        val offsetX = maxWidth * 0.1f
        val offsetY = maxHeight * 0.1f
        Box(modifier = Modifier
            .size(5.dp)
            .offset(x = offsetX, y = offsetY)
            .background(Color.Yellow)
        )
    }
}

maxWidth和maxHeight对应图片的实际显示尺寸，乘以百分比后得到的偏移量会随父容器尺寸变化自动调整，完美适配响应式场景。

方法二：自定义可复用的百分比偏移Modifier #

如果需要在多个地方复用百分比偏移逻辑，可以自定义一个offsetPercent Modifier，写法更接近你期望的offset(10.percent)：

// 自定义百分比偏移Modifier
fun Modifier.offsetPercent(xPercent: Float, yPercent: Float) = this.then(
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        // 根据父容器尺寸计算偏移像素值
        val offsetX = (constraints.maxWidth * xPercent).roundToInt()
        val offsetY = (constraints.maxHeight * yPercent).roundToInt()
        // 保持父容器尺寸不变，放置子组件到计算后的偏移位置
        layout(constraints.maxWidth, constraints.maxHeight) {
            placeable.place(offsetX, offsetY)
        }
    }
)

// 使用示例
@Composable
fun DaThing() {
    Box {
        Image(
            painter = painterResource(id = R.drawable.testgrid10x10),
            contentDescription = "",
            modifier = Modifier.fillMaxSize()
        )
        Box(modifier = Modifier
            .size(5.dp)
            .offsetPercent(xPercent = 0.1f, yPercent = 0.1f) // 直接传入百分比
            .background(Color.Yellow)
        )
    }
}

这个Modifier通过layout作用域获取父容器的约束尺寸，计算出偏移后放置子组件，逻辑封装后可以在任意Composable中复用，代码更简洁。

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