快速上手Compose约束布局

前语

今天对Compose中束缚布局的运用方法进行一下记载，我发现在学习Compose的过程中,像Column,Row等布局能够很快上手，能够理解怎样运用，但是关于ConstraintLayout 仍是得额外学习一下，所以总结一下进行记载。其实Compose-ConstraintLayout 完全是我对传统布局运用习惯的搬迁，已经习惯了束缚的思维方法。

接下来咱们就看Compose中ConstraintLayout 是怎样运用的。

运用

首先咱们先引入依赖

Groovy

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

Kotlin

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

在传统布局中，咱们对束缚布局的运用都是通过id进行相互束缚的，那在Compose中咱们相同需求先创立一个类似id功用一样的引证。

val (text) = createRefs()

在Compose中有两种创立引证的方法：createRefs() 和createRef()。createRef()只能创立一个，createRefs()每次能创立多个(最多16个)。

然后对咱们的组件设置束缚，这里我用了一个Text()做示例。

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (text) = createRefs()
        Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        })
    }

这样就完成了 Text() 组件在咱们布局的左上角。

当咱们同时也对end 做出束缚，就会到达一个Text()组件在布局中横向居中的作用。

Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })

当咱们想有一个Button按钮 在文字的下方居中显现，咱们能够这样做：

    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (text, button) = createRefs()
        Text("Hello Word", modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })
        Button(onClick = {}, modifier = Modifier.constrainAs(button) {
            start.linkTo(text.start)
            end.linkTo(text.end)
            top.linkTo(text.bottom)
        }) {
            Text("按钮")
        }
    }

将Button组件相关于文字组件做出前，后，顶部束缚。

实践

接下来咱们尝试运用束缚布局来做一个个人信息显现的作用。咱们先看下咱们要完成的作用：

咱们先分化一下这个作用，一个Image图片，一个Text 称号，一个Text 微信号， 还有一个 二维码。

接下来咱们就一步步来完成一下。

先是头像部分，咱们对Image头像，先进行上，下，前束缚，再设置一下左边距，能够留出空间来。

    Image(painter = painterResource(R.drawable.logo8), "head",
            contentScale = ContentScale.Crop,
            modifier = Modifier.constrainAs(head) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }.padding(start = 20.dp).size(60.dp).clip(CircleShape)
        )

然后咱们开始添加称号和id。

Text()称号组件是顶部和头像顶部对齐，start 和 头像的end 进行对齐；Id 是关于称号 start对齐，顶部与称号底部对齐。

       Text("Android开发那点事儿",
            style = TextStyle(fontSize = 16.sp, 
                color = Color.Black, fontWeight = FontWeight(600)),
            modifier = Modifier.constrainAs(name) {
                top.linkTo(head.top)
                start.linkTo(head.end)
            }.padding(start = 10.dp)
        )
        Text("微信号:android-blog",
            style = TextStyle(fontSize = 12.sp,
                color = Color.DarkGray, fontWeight = FontWeight(400)),
            modifier = Modifier.constrainAs(id) {
                top.linkTo(name.bottom)
                start.linkTo(name.start)
            }.padding(start = 10.dp, top = 5.dp)
        )

作用：

最终咱们来加载二维码，二维码图标和右箭头图标都是从“阿里icon”中找的图标。

将图标相关于头像上下居中，紧靠右边，然后留出距离，然后是箭头上下都跟二维码图标对齐，左边紧贴二维码的右侧。

    ConstraintLayout(modifier = Modifier.width(300.dp)
    .height(80.dp).background(Color.LightGray)) {
        ........
        Image(
            painter = painterResource(R.drawable.qr),"",
            modifier = Modifier.size(20.dp).constrainAs(qr) {
                top.linkTo(head.top)
                bottom.linkTo(head.bottom)
                end.linkTo(parent.end, 30.dp)
            })
        Image(
            painter = painterResource(R.drawable.left), "",
            modifier = Modifier.size(20.dp).constrainAs(left) {
                top.linkTo(qr.top)
                bottom.linkTo(qr.bottom)
                start.linkTo(qr.end)
            })
    }

咱们来看下最终完成的作用。

至此，咱们就通过ConstraintLayout完成了一个简略的作用，如果有传统布局的运用基础，Compose的运用起来仍是能够很快上手的。

最终

ConstraintLayout 最基础的用法咱们就写到这里，另外还有一些进阶用法会在后续的文章中给大家详细介绍。

本文转自 blog.csdn.net/WangYilei03…，如有侵权，请联络删去。