Compose 操作符 .layout 的使用

size放在layout后面的效果

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                    //这里的参数定义的是摆放 Box占据的位置。可以比Box的尺寸大也可以比Box的尺
                    //寸小。但是这个尺寸会影响到跟他自己平级的child的位置
                    //比如这里Box的Parent是Column，设置width 跟 height 大于 我们设置的 
                    //100.dp,所以自己偏移的时候，下面的box也会被挤下去
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}

2 size放在layout 前面的效果

2.1 size 放在layout前面,会限制容器在Column中占据的位置。就是他的尺寸会变大但是不会挤呀下一个child。

 var toggled by remember {
            mutableStateOf(false)
        }
        val interactionSource = remember {
            MutableInteractionSource()
        }
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .padding(16.dp)
                .fillMaxSize()
                .clickable(indication = null, interactionSource = interactionSource) {
                    toggled = !toggled
                }
        ) {
            val offsetTarget = if (toggled) {
                IntOffset(150, 150)
            } else {
                IntOffset.Zero
            }
            val offset = animateIntOffsetAsState(
                targetValue = offsetTarget, label = "offset"
            )
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Red)
            )
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(Color.Yellow)
                    .layout { measurable, constraints ->
                        val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                        val placeable = measurable.measure(constraints)
                        layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                            placeable.placeRelative(0,0)
                        }
                    }
                    .background(Color.Green)
            )
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Blue)
            )
        }