Compose ConstraintLayout的pivotY属性未按预期工作，如何解决？

为什么pivotY不起作用 #

pivotY是用来设置组件变换操作（如旋转、缩放）的中心点，而非布局定位属性。它的取值范围通常是0到1（相对于组件自身尺寸），默认0.5表示以组件中心为变换原点，调整它不会改变组件在布局中的位置。另外你之前的代码同时约束了top.linkTo(parent.top)和bottom.linkTo(parent.bottom)，对于固定尺寸的组件来说会造成约束冲突，ConstraintLayout会自动居中处理，这也导致pivotY的设置完全无效。

两种无需具体Dp的百分比定位方案 #

方案1：使用Guideline（直观易维护）

通过创建一个距离父布局顶部30%的Guideline，将组件的对应位置与Guideline绑定，实现精准的百分比定位：

@Composable
@Preview
fun Test() {
    ConstraintLayout(
        modifier = Modifier.fillMaxWidth().aspectRatio(1f)
    ) {
        val (btn, topGuideline) = createRefs()
        // 创建垂直方向、距离顶部30%的参考线
        createGuidelineFromTop(0.3f)
        
        Box(
            modifier = Modifier
                .size(64.dp)
                .background(Color.Red)
                .constrainAs(btn) {
                    // 组件顶部对齐参考线（即距离父布局顶部30%）
                    top.linkTo(topGuideline)
                    // 水平方向居中
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )
    }
}

如果需要让组件的中心位于父布局30%的位置，只需将top.linkTo(topGuideline)替换为centerVertically.linkTo(topGuideline)即可。

方案2：使用垂直偏移（Bias）

当组件同时约束上下边界到父布局时，通过verticalBias（或top.bias）可以控制组件在垂直方向的偏移比例，取值0到1（0对应顶部，1对应底部）：

@Composable
@Preview
fun Test() {
    ConstraintLayout(
        modifier = Modifier.fillMaxWidth().aspectRatio(1f)
    ) {
        val btn = createRef()
        
        Box(
            modifier = Modifier
                .size(64.dp)
                .background(Color.Red)
                .constrainAs(btn) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    // 将组件垂直中心偏移到父布局30%的位置
                    verticalBias = 0.3f
                }
        )
    }
}

这种方式适合需要让组件在上下约束区间内按比例偏移的场景，无需额外创建Guideline。

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