Kotlin Compose ConstrainLayout的使用

 添加依赖

    implementation 'androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha02'

@Composable
fun ConstrainLayoutContent() {
    ConstraintLayout {
        //通过createRefs创建引用，
        val (button, text) = createRefs()
        Button(onClick = { },
            modifier = Modifier.constrainAs(button) {
                //使用linkTo制定约束 parent 是ConstraintLayout的引用
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(parent.start, margin = 16.dp)
            }) {
            Text("Button")
        }

        Text("Text", modifier = Modifier.constrainAs(text) {
            //使用linkTo制定约束 parent 是ConstraintLayout的引用
            top.linkTo(button.bottom, margin = 16.dp)
            start.linkTo(parent.start, margin = 16.dp)
            //在协调者布局中居中
            centerHorizontallyTo(parent)
        })
    }
}

 

 学习 下如何使用

Barrier

@Composable
fun ConstrainLayoutContent2() {
    ConstraintLayout {
        //通过createRefs创建引用，
        val (button1, button2, button3, text) = createRefs()
        Button(onClick = { },
            modifier = Modifier.constrainAs(button1) {
                //使用linkTo制定约束 parent 是ConstraintLayout的引用
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(parent.start, margin = 16.dp)
            }) {
            Text("Button1")
        }
        Spacer(modifier = Modifier.width(4.dp))
        Button(onClick = { },
            modifier = Modifier.constrainAs(button2) {
                //使用linkTo制定约束 parent 是ConstraintLayout的引用
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(button1.end, margin = 16.dp)
            }) {
            Text("Button2")
        }

        Text("Text", modifier = Modifier.constrainAs(text) {
            //使用linkTo制定约束 parent 是ConstraintLayout的引用
            top.linkTo(button1.bottom, margin = 16.dp)
            start.linkTo(parent.start, margin = 16.dp)
            //在协调者布局中居中
//            centerHorizontallyTo(parent)
            //等价于这个 这个是根据button1的右边进行居中
            centerAround(button1.end)
        })
        //将 button1和text组合起来 建议一个屏障（barrier）
        //可以让空间根据这两个的底边进行对其
        val barrier = createEndBarrier(button1, text)
        Button(onClick = { },
            modifier = Modifier.constrainAs(button3) {
                //使用linkTo制定约束 parent 是ConstraintLayout的引用
                top.linkTo(text.bottom, margin = 16.dp)
                start.linkTo(barrier)
            }) {
            Text("Button3")
        }
    }

效果

下面介绍如何使用guideLine

并适配text换行

 默认情况下 如果使用很长的文本

@Composable
fun ConstrainLayoutContent3() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(text = "Text very long very long very long very long very long very long very long very long very long very long very long very long very long very long", modifier = Modifier.constrainAs(text) {
            linkTo(start = guideline, end = parent.end)

        })

    }
}

添加这个属性

width = Dimension.preferredWrapContent

@Composable
fun ConstrainLayoutContent3() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(
            text = "Text very long very long very long very long very long very long very long very long very long very long very long very long very long very long",
            modifier = Modifier.constrainAs(text) {
                linkTo(start = guideline, end = parent.end)
                width = Dimension.preferredWrapContent
            })

    }
}

有些内容没有换行 而且有遮挡

效果