[英]Is there something like ConstraintLayout's "dimensionRatio" property in Jetpack Compose?
当图像的宽度\/高度为 4\/3 时,我想将图像的开始限制为父的开始,从上到下,从端到端,就像 Android Xml 中的
app:layout_constraintDimensionRatio="H,3:4"<\/code> 。
下面是我的代码:
ConstraintLayout(
modifier = Modifier
.wrapContentHeight()
.width(162.dp)
.clip(RoundedCornerShape(10.dp))
.background(color = Color.White)
.clickable {
//do something
}
) {
val (coverImg, title, status, date) = createRefs()
Image(
"some ignored properties",
modifier = Modifier
.constrainAs(coverImg) {
linkTo(start = parent.start, end = parent.end)
top.linkTo(parent.top)
width = Dimension.fillToConstraints
}
.height(102.dp)//I don't want to specify its height
)
Text(...)
AnyOtherLayout(...)
}
您可以在 jetpack compose 中使用 aspectRatio 修饰符。
modifier = Modifier.aspectRatio(0.75f)
它需要两个参数,第一个是表示该纵横比的单个浮点值。 就像如果你想使用 3:4 你必须输入 3/4f 或 3/4 = .75f。
第二个是可选的,默认为 false。 如果您发送 true,它将首先考虑 Constraints.maxHeight。
matchHeightConstraintsFirst: Boolean = false
您可以使用aspectRatio
修饰符:
Image(
painter = painterResource(id = R.drawable.xxx),
"some ignored properties",
contentScale = ContentScale.FillBounds,
modifier = Modifier
.constrainAs(coverImg) {
linkTo(start = parent.start, end = parent.end)
top.linkTo(parent.top)
width = Dimension.fillToConstraints
}
.aspectRatio(4f/3f)
)
使用Modifier.aspectRatio
的问题在于,在使用其他约束时似乎没有考虑到它。 纵横比实际上由 ConstraintLayout 本身支持
以这种布局为例,我们将一个维度限制为 16:9 的比例
ConstraintLayout(modifier = Modifier.fillMaxSize()) {
val (box) = createRefs()
val guidelineBottom = createGuidelineFromBottom(0.1f)
Box(modifier = Modifier
.background(Color.Blue)
.constrainAs(box) {
linkTo(parent.start, parent.end, startMargin = 32.dp, endMargin = 32.dp)
linkTo(parent.top, guidelineBottom)
width = Dimension.ratio("16:9")
height = Dimension.fillToConstraints
}
)
}
这给了我们这个
如果我们然后更改 guidelineBottom 的偏移量以减少可用高度,我们最终会得到这个
val guidelineBottom = createGuidelineFromBottom(0.9f)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.