android - Android撰写约束布局问题
问题描述
撰写版本:1.0.0-beta04
.
约束布局组合版本:1.0.0-alpha05
。
可组合:
@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)
})
}
}
}
预览:
如您所见,这些项目并没有像预期的那样受到限制。view_based 中的视图ConstraintLayout
不会在屏幕之外绘制,除非约束被弄乱或者是故意的。
解决方案
在Box
可组合中删除fillMaxSize()
修饰符并应用约束width = Dimension.fillToConstraints
。
就像是:
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)
})
}
}
推荐阅读
- redis - 如何删除与 Redis 集群中的模式匹配的键
- javascript - 沿 3D javascript 数组的单轴查找最小值/最大值
- excel - 向已经维度化的数组添加一行
- python - 如何过滤具有唯一 ID 的 pandas 数据框并在其他列上执行计算?
- c - 如果 3 个相同,则检查数组中的 5 个整数
- javascript - 在 Power BI 中创建地图自定义视觉对象
- ios - 如何在 Swift 中保留时间的同时最好地将时间转换为双倍并返回
- javascript - 如何在 TypeScript 中创建本地模块
- java - Oauth 2.0 - 单个资源服务器但多个客户端应用程序
- php - 显示来自 json 的数据