Jetpack Compose 自定义布局以及固有特性测量，轻松入门flutter

}

}

}

}

复制代码

• 首先我们声明一个枚举。叫CornerPosition，枚举有四种取值，TopLeft表示左上角，TopRight右上角，BottomLeft左下角，BottomRight又下角。

• 接着我们定义一个Modifier的扩展函数customCornerPosLayout，入参是pos:CornerPosition我们的枚举类

• customCornerPosLayout的实现是通过layout的lamda去实现。其实是调用Modifier.layout去实现自定义布局。有两个参数一个是measurable，一个是constraints父控件的约束

• 自定义布局第一步val placeable = measurable.measure(constraints) 是根据measurable跟constraints父控件的约束，通过方法measurable.measure(constraints)去生成一个placeable类。该类拥有子控件的宽width跟高height

• 自定义布局的第二部 需要调用layout(w,h)的方法去设置当前view能使用的宽高。我们这里是用layout(constraints.maxWidth, constraints.maxHeight) 传入的是constraints.maxWidth父控件提供能使用的最大宽，constraints.maxHeight父控件提供能使用的最大高

• 接着第三部就是在layout{}里通过 placeable.placeRelative 去放置该元素的位置。我们这里是根据传入的参数是左上角CornerPosition.TopLeft，还是左下角CornerPosition.BottomLeft，还是右上角CornerPosition.TopRight，还是右下角CornerPosition.BottomRight去放置该界面元素的位置。

• placeable.placeRelative(0, 0) 左上角是0，0

• placeable.placeRelative(constraints.maxWidth-placeable.width, 0) 右上角 x是需要拿最大宽度减去本身view的宽度，y是0

• placeable.placeRelative(0, constraints.maxHeight-placeable.height) 左下角x是0，y是需要拿最大的高度减去本身的高度

• placeable.placeRelative(constraints.maxWidth-placeable.width, constraints.maxHeight-placeable.height) x是需要拿最大宽度减去本身view的宽度，y需要拿最大的高度减去本身的高度

举例：自定义完成之后，我们举个放置在右下角的例子

@Preview

@Composable

fun customCornerPosLayoutTest(){

Box(modifier = Modifier.size(100.dp)

.background(color = Color.Red)) {

Box(modifier = Modifier

.customCornerPosLayout(CornerPosition.BottomRight)

.size(10.dp)

.background(color = Color.Blue, shape = CircleShape))

}

}

复制代码

效果如下：