2022.9.11 Compose-解耦API&Intrinsics

2022-09-11

解耦API & Intrinsics

1.解耦API

在某些情况下,最好将约束条件与应用它们的布局分离开来。例如,我们可能会希望根据屏幕配置来更改约束条件,或在两个约束条件集之间添加动画效果

将ConstraintSet作为参数传递给ConstraintLayout
使用layoutId修饰符将在ConstraintSet中创建的引用分配给可组合项

案例:想让横屏竖屏的margin不一样

先为button和text写好约束

private fun decoupledConstraints(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)
        }
    }
}

直接把约束传入ConstraintLayout

@Composable
fun DecoupledConstraintLayout2(){
    BoxWithConstraints {
        val constraints = if (maxWidth < maxHeight){
            decoupledConstraints(16.dp) //竖屏
        }else{
            decoupledConstraints(80.dp)    //横屏
        }

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

            Text(
                text = "Text",
                modifier = Modifier.layoutId("text")
            )
        }
    }
}

2.Intrinsics

Compose只测量子元素一次,测量两次会引发运行时异常。但是,有时在测量子元素之前,我们需要一些有关子元素的信息

Intrinsics允许在实际测量之前查询子项

(min|max) IntrinsicWidth:鉴于此高度,可以正确绘制内容的最小/最大宽度是多少

(min|max)IntrinsicHeight:鉴于此宽度,可以正确绘制内容的最小/最大高度是多少

使用案例:

测量了要包含两个text所需要的最小高度,在中间加入了一条竖线

@Composable
fun TwoTexts(modifier: Modifier = Modifier){
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            text = "Hi",
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start)
        )

        Divider(
            color = Color.Blue,
            modifier = Modifier
                .fillMaxHeight()    //父容器高度多高就多高
                .width(1.dp)
        )

        Text(
            text = "there",
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.End)
        )
    }
}