android——compose的ConstraintLayout

本篇文章我们使用compose的ConstraintLayout布局来做一个比较常用的视图，效果图如下：

首先是依赖导入：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

代码：

@Composable
fun ConstraintLayoutDemo() {
    ConstraintLayout(modifier = Modifier
        .fillMaxSize()
        .padding(10.dp)) {
        val (imgHead, title, subtitle) = createRefs()
        Image(
            painter = painterResource(R.drawable.ic_launcher_background), "head",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .constrainAs(imgHead) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
                .padding(start = 20.dp)
                .size(60.dp)
                .clip(CircleShape)
        )

        Text(
            "我是Android开发标题",
            style = TextStyle(
                fontSize = 16.sp,
                color = Color.Black, fontWeight = FontWeight(600)
            ),
            modifier = Modifier
                .constrainAs(title) {
                    // 位置：顶部对图片顶部，左对图片右，底对副标题顶部
                    top.linkTo(imgHead.top)
                    start.linkTo(imgHead.end)
                    bottom.linkTo(subtitle.top)
                }
                .padding(start = 10.dp)
        )

        Text(
            "副标题：大家好********",
            style = TextStyle(
                fontSize = 12.sp,
                color = Color.DarkGray, fontWeight = FontWeight(400)
            ),
            modifier = Modifier
                .constrainAs(subtitle) {
                    // 位置：顶部对标题底部，左对标题左侧，底对图片底部
                    top.linkTo(title.bottom)
                    start.linkTo(title.start)
                    bottom.linkTo(imgHead.bottom)
                }
                .padding(start = 10.dp, top = 5.dp)
        )


    }
}

在 Compose 中使用 ConstraintLayout 有几点需要注意的：

1. ConstraintLayout 中的子元素是通过 createRefs() 或 createRef() 方法初始化声明的，并且每个子元素都会关联一个ConstraintLayout 中的 Composable 组件；

2. 子元素之间的约束关系是通过 Modifier.constrainAs() 的 Lambda 表达式来实现的，具体的可以看下面的 code 9；

3. 约束关系可以使用 linkTo 或其他约束方法实现；

4. parent 是一个默认存在的引用，代表 ConstraintLayout 父布局本身，也是用于子元素的约束关联。

总结：如果使用过xml的方式使用ConstraintLayout布局，就很好能理解上面代码的意思

demo的代码：https://download.csdn.net/download/wy313622821/87570801