Android ConstraintLayout约束布局使用实例介绍

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout() {
        val (button, text) = createRefs()
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "btn")
        }
    }
}

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout() {
        ...
        Text(text = "nullclear", modifier = Modifier.constrainAs(text) {
            // 直接拿button作为参照点进行布局
            top.linkTo(button.bottom, margin = 16.dp)
            // 水平约束对齐父类
            centerHorizontallyTo(parent)
        })
    }
}

@Composable
fun ConstraintLayoutContent2() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(text = "helloworld ansd htiwhiqeusadjasdl d joi hdaslh dqlwh as qwe", modifier = Modifier.constrainAs(text) {
            linkTo(start = guideline, end = parent.end)
            width = Dimension.preferredWrapContent
        })
    }
}

private fun decoupleConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")
        constrain(button) {
            top.linkTo(parent.top, margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}

@Composable
fun DecoupleConstraintsLayout() {
    BoxWithConstraints {
        // 响应式布局
        val constraints = if (maxWidth < maxHeight) {
            decoupleConstraints(16.dp)
        } else {
            decoupleConstraints(160.dp)
        }
        // 把响应式布局的if判断作为参数传入，约束布局即可按照对应法则布置组件
        ConstraintLayout(constraints) {
            // layoutId对应我们在约束集合中配置的名称！
            Button(onClick = { /*TODO*/ }, modifier = Modifier.layoutId("button")) {
                Text(text = "button")
            }
            Text(text = "text", modifier = Modifier.layoutId("text"))
        }
    }
}