08. Compose ConstrainLayout

190 阅读1分钟

01. Compose 可组合组件之Row And Column

02. Compose 可组合组件之 属性 modifier

03. Compose 可组合组件之Card 图片

04. Compose 字体

05. Compose State

06. Compose SnackBar

07. Compose List

08. Compose ConstrainLayout

class ConstrainLayoutActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val constraints = ConstraintSet {
                val greenBox = createRefFor("greenBox")
                val redBox = createRefFor("redBox")
                //分界线 50%的位置
                val guideline = createGuidelineFromTop(0.5f)

                //绿色块的约束位置
                constrain(greenBox) {
                    top.linkTo(guideline)//顶部连接分界线
                    start.linkTo(parent.start)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }

                //红色块的约束位置
                constrain(redBox) {
                    top.linkTo(parent.top)
                    start.linkTo(greenBox.end)
//                    end.linkTo(parent.end)//红色会在剩余的空间中居中
//                    width = Dimension.fillToConstraints//填充满
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                createHorizontalChain(greenBox, redBox)//两个均匀分布
            }

            ConstraintLayout(constraints, modifier = Modifier.fillMaxSize()) {
                Box(
                    modifier = Modifier
                        .background(color = Color.Green)
                        .layoutId("greenBox")
                )
                Box(
                    modifier = Modifier
                        .background(color = Color.Red)
                        .layoutId("redBox")
                )

            }
        }
    }
}