2022.9.10 Compose布局（三）

2022-09-10

Compose布局（三）

1.约束布局

引用是使用createRefs()或createRefFor()创建的,ConstraintLayout中的每个可组合项都需要有之与关联的引用

约束条件是使用constrainAs()修饰符提供的,该修饰符将引用作为参数,可以让你在主题lambda中指定其约束条件

约束条件是使用linkTo()或其他有用的方法指定的

parent是一个现有的引用,可用于指定对ConstraintLayout可组合项本身的约束条件

案例1:

在实现对齐要求比较复杂的较大布局时,ConstraintLayout很有用

使用ConstraintLayout要现在build.gradle中添加支持

1	implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta01"

开始写布局

@Composable
fun ConstraintLayoutContent(){
    ConstraintLayout {
        //通过createRefs创建引用,ConstraintLayout中的每个元素都需要关联一个引用
        val (button,text) = createRefs()

        Button(
            onClick = { /*TODO*/ },
            //使用Modifier.constrainAs来提供约束,引用作为它的第一个参数
            //在lambda表达式中指定约束规则
            modifier = Modifier.constrainAs(button){
                top.linkTo(parent.top,margin = 16.dp)
            }
        ) {
            Text(text = "Button")
        }

        Text(
            text = "Text",
            Modifier.constrainAs(text) {
                top.linkTo(button.bottom,margin = 16.dp)
                //在ConstraintLayout中水平居中
                centerHorizontallyTo(parent)
            }
        )

    }
}

案例2:

再实现一个这样的效果

@Composable
fun ConstraintLayoutContent2(){
    ConstraintLayout{
        val (button1,button2,text) = createRefs()
        
        Button(
            onClick = { /*TODO*/ },
            Modifier.constrainAs(button1){
                top.linkTo(parent.top,margin = 16.dp)
            }
        ) {
            Text(text = "Button1")
        }
        
        Text(
            text = "Text",
            Modifier.constrainAs(text){
                top.linkTo(button1.bottom,margin = 16.dp)
                centerAround(button1.end)
            }
        )

        //将button1和text组合起来,建立一个屏障(barrier)
        val barrier = createEndBarrier(button1,text)

        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier.constrainAs(button2){
                top.linkTo(parent.top,margin = 16.dp)
                start.linkTo(barrier)
            }
        ) {
            Text(text = "Button2")
        }
        
    }
}

案例3：

让很长的一段text文字换行

@Composable
fun LargeLayoutContent(){
    ConstraintLayout {
        val (text) = createRefs()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(
            text = "鳄鱼鳄鱼鳄鱼鳄鱼鳄鱼鳄鱼鳄鱼一条猫一条猫一条长长长的猫和鳄鱼",
            Modifier.constrainAs(text){
                linkTo(start = guideline,end = parent.end)
                width = Dimension.preferredWrapContent
            }
        )
    }
}