前面几篇中介绍了布局相关的：布局基础知识、Material组件和布局、自定义布局。
本篇我们继续来介绍下布局的最后一个知识点：Compose中使用ConstraintLayout。
ConstraintLayout 有助于根据可组合项的相对位置将它们放置在屏幕上，在使用多个嵌套 Row、Column、Box 和自定义布局元素时可用该布局替代。在实现对齐要求比较复杂的较大布局时，ConstraintLayout 很有用。类似Android View系统中的ConstrantLayout布局。
使用Compose中的ConstraintLayout时，需要在build.gradle中引入如下库：
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"
具体版本请参考：ConstraintLayout版本页面
★注：在Android View系统中使用ConstraintLayout是为了减少布局嵌套层级，提升性能，但在Compose UI系统中不存在这个问题，它能高效处理较深的布局层次结构。因此在Compose中是否使用ConstraintLayout完全取决于开发者的使用习惯、代码的易读性和可维护性。
下面来看下使用方式：
方式一：在可组合项中使用修饰符以内嵌的方式设置
使用步骤：
步骤一、使用 createRefs()或 createRef()创建与组件关联的引用
步骤二、通过给constraintAs修饰符设置与之关联的引用
步骤三、调用linkTo()设置约束
parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。
实例：
@Composablefun StudyConstraintLayout(){ ...... // Constraint 布局 ConstraintLayout( modifier = Modifier.fillMaxSize() ) { //步骤一、使用 createRefs() 或 createRef() 创建与组件关联的引用 val (textTitle,tfUser,tfPassword,btnLogin,snack) = createRefs() Text( text = "登录界面", modifier = Modifier //步骤二、通过给constraintAs修饰符设置与之关联的引用 .constrainAs(textTitle) { //步骤三、调用linkTo()设置约束 start.linkTo(parent.start) end.linkTo(parent.end) //设置顶部约束和margin top.linkTo(parent.top,20.dp) } ) ...... }}
鉴于示例代码太多，这里只贴部分代码，详细代码(StudyConstraintLayout)
运行效果：
方式二：约束条件和布局分离方式
在某些情况下我们需要将约束条件和应用的布局分离开，便于使用。如：根据屏幕配置来更改约束条件，或在两个约束条件集之间添加动画效果等。
对于此类应用场景可采用ConstraintSet+Modifier.layoutId组合的方式实现。具体步骤如下：
生成一个ConstraintSet对象，并将其作为参数传递给 ConstraintLayout；使用layoutId修饰符将在ConstraintSet中创建的引用分配给可组合项；
示例如下：
@Composablefun StudyConstraintSet(){ val constraintSet = decoupledConstraints(0.dp) ConstraintLayout(constraintSet) { Button( onClick = { }, //通知设置layoutId实现控制约束 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) } constrain(text){ top.linkTo(button.bottom,10.dp) } }}//预览@Preview(name = "方式二 ConstraintSet")@Composablefun PreviewStudyConstraintLayout2(){ StudyConstraintSet()}
效果图：
到这里Compose的ConstrantLayout内容介绍完了。
欢迎留言，一起学习，共同进步！
github - 示例源码
gitee - 示例源码