[英]Android Compose ConstraintLayout issue
compose version: 1.0.0-beta04
.撰写版本:
1.0.0-beta04
。
constraintlayout-compose version: 1.0.0-alpha05
. constraintlayout-compose 版本:
1.0.0-alpha05
。
composable:可组合:
@Composable
fun comp1() {
Surface(Modifier
.fillMaxWidth()
.height(50.dp), color = Color.Red) {
ConstraintLayout(Modifier.fillMaxSize()) {
val guide_line = createGuidelineFromAbsoluteRight(.2f)
val (icon_ref, box_ref, spacer_ref) = createRefs()
Icon(Icons.Filled.Search, null,
modifier = Modifier.constrainAs(icon_ref) {
absoluteLeft.linkTo(guide_line)
absoluteRight.linkTo(parent.absoluteRight)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
}
)
Box(Modifier
.background(Color.Blue)
.fillMaxSize()
.constrainAs(box_ref) {
absoluteLeft.linkTo(parent.absoluteLeft)
absoluteRight.linkTo(guide_line)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
}) {}
Spacer(Modifier
.background(Color.Yellow)
.width(2.dp)
.fillMaxHeight()
.constrainAs(spacer_ref) {
absoluteRight.linkTo(guide_line)
})
}
}
}
preview:预习:
as you can see, the items are not constrained as one would expect.如您所见,这些项目并没有像预期的那样受到限制。 the views in the view_based
ConstraintLayout
wouldn't draw outside of the screen unless the constraints are messed up or it was intentional. view_based
ConstraintLayout
中的视图不会在屏幕之外绘制,除非约束被弄乱或者是故意的。
In the Box
composable remove the fillMaxSize()
modifier and apply the constraint width = Dimension.fillToConstraints
.在可组合
Box
删除fillMaxSize()
修饰符并应用约束width = Dimension.fillToConstraints
。
Something like:就像是:
Surface(Modifier
.fillMaxWidth()
.height(50.dp), color = Color.Red) {
ConstraintLayout(Modifier.fillMaxSize()) {
val guide_line = createGuidelineFromAbsoluteRight(.2f)
val (icon_ref, box_ref, spacer_ref) = createRefs()
Icon(Icons.Filled.Search, null,
modifier = Modifier.constrainAs(icon_ref) {
start.linkTo(guide_line)
end.linkTo(parent.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
}
)
Box(contentAlignment=Alignment.CenterStart,
modifier = Modifier
.background(Color.Blue)
.fillMaxHeight()
.constrainAs(box_ref) {
start.linkTo(parent.start)
end.linkTo(guide_line)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
width = Dimension.fillToConstraints //ADD THIS
}) {
Text(text = "Text ", color = Yellow)
}
Spacer(Modifier
.background(Color.Yellow)
.width(2.dp)
.fillMaxHeight()
.constrainAs(spacer_ref) {
end.linkTo(guide_line)
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.