android compose ConstraintLayout

原创已于 2023-09-16 21:39:08 修改 · 894 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #vue.js #elementui

于 2023-08-27 21:02:26 首次发布

android基础专栏收录该内容

28 篇文章

订阅专栏

博客介绍了在Android开发中，可用createGuidelineFromStart或其他指导线替代layout_constraintVertical_bias和layout_constraintHorizontal_bias，还提到用链条实现多个控件居中平分的方法。

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

@Preview
@Composable
fun Greeting() {
    ConstraintLayout(Modifier.fillMaxSize(1f)) {
        val (text1,text2)=createRefs()
        val guideLine = createGuidelineFromStart(0f)    // 左
        val guideLine2 = createGuidelineFromEnd(0.9f)   // 右
        Text(text = "text1",  Modifier.constrainAs(text1){
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }.background(color = Color.Black), color = Color.White)
        Text(text = "test2",  Modifier.constrainAs(text2){
            top.linkTo(text1.top)
            bottom.linkTo(text1.bottom)
            start.linkTo(text1.start)
            end.linkTo(parent.end)
            linkTo(start = guideLine,end = guideLine2)
        }.background(color = Color.Blue), color = Color.Red)
    }
}

用createGuidelineFromStart或者其他的指导线来替代layout_constraintVertical_bias或者layout_constraintHorizontal_bias

2.用链条来实现多个控件居中平分

    @Preview
    @Composable
    fun constrainLayout(){
        ConstraintLayout(Modifier.fillMaxSize(1f)) {
            val (text1,text2,text3,text4)=createRefs()
            createHorizontalChain(text1,text2,text3,text4,chainStyle = ChainStyle.Spread)//Spread SpreadInside Packed
            Text(text = "测试1", modifier =Modifier.constrainAs(text1){
                top.linkTo(parent.top)
            })
            Text(text = "测试2",modifier = Modifier.constrainAs(text2){
                top.linkTo(parent.top)
            })
            Text(text = "测试3",modifier = Modifier.constrainAs(text3){
                top.linkTo(parent.top)
            })
            Text(text = "测试4",modifier = Modifier.constrainAs(text4){
                top.linkTo(parent.top)
            })
        }
    }