1.ConstraintLayout
ConstraintLayout 有助于根据可组合项的相对位置将它们放置在屏幕上，它是使用多个嵌套 Row、Column、Box 和自定义布局元素的替代方案。
在实现对齐要求比较复杂的较大布局时，ConstraintLayout 很有用。
如需使用 Compose 中的 ConstraintLayout，您需要在 build.gradle 中添加以下依赖项：
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08"
复制代码
2.Compose 中的 ConstraintLayout 支持 DSL：
引用是使用 createRefs() 或 createRefFor() 创建的，ConstraintLayout 中的每个可组合项都需要有与之关联的引用。
约束条件是使用 constrainAs() 修饰符提供的，该修饰符将引用作为参数，可让您在主体 lambda 中指定其约束条件。
约束条件是使用 linkTo() 或其他有用的方法指定的。
parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。
下面是使用 ConstraintLayout 的可组合项的示例：
@Composablefun ConstraintLayoutContent() { ConstraintLayout { // Create references for the composables to constrain val (button, text) = createRefs()
Button( onClick = { /* Do something */ }, // Assign reference "button" to the Button composable // and constrain it to the top of the ConstraintLayout modifier = Modifier.constrainAs(button) { top.linkTo(parent.top, margin = 16.dp) } ) { Text("Button") }
// Assign reference "text" to the Text composable // and constrain it to the bottom of the Button composable Text("Text", Modifier.constrainAs(text) { top.linkTo(button.bottom, margin = 16.dp) }) }}
复制代码
3.Decoupled API
在 ConstraintLayout 示例中，约束条件是在应用它们的可组合项中使用修饰符以内嵌方式指定的。不过，在某些情况下，最好将约束条件与应用它们的布局分离开来。
对于此类情况，您可以通过不同的方式使用 ConstraintLayout：
@Composablefun DecoupledConstraintLayout() { BoxWithConstraints { val constraints = if (minWidth < 600.dp) { decoupledConstraints(margin = 16.dp) // Portrait constraints } else { decoupledConstraints(margin = 32.dp) // Landscape constraints }
ConstraintLayout(constraints) { Button( onClick = { /* Do something */ }, modifier = Modifier.layoutId("button") ) { Text("Button") }
Text("Text", Modifier.layoutId("text")) } }}
private fun decoupledConstraints(margin: Dp): ConstraintSet { return ConstraintSet { val button = createRefFor("button") val text = createRefFor("text")
constrain(button) { top.linkTo(parent.top, margin = margin) } constrain(text) { top.linkTo(button.bottom, margin) } }}
复制代码
评论