在Jetpack Compose中,组合元素或子组合元素的尺寸使用约束设置,这是一组尺寸和边界或有限标志。而Modifier.requiredX用于强制大小,但如果约束不在父级限制范围内,则可能会轻易破坏您的布局。
widthIn
和requiredWidthIn
之间的区别在于前者遵守其之前的尺寸修饰符或最大父级尺寸,而后者可以强制约束。
@Stable
fun Constraints(
minWidth: Int = 0,
maxWidth: Int = Constraints.Infinity,
minHeight: Int = 0,
maxHeight: Int = Constraints.Infinity
): Constraints {
require(maxWidth >= minWidth) {
"maxWidth($maxWidth) must be >= than minWidth($minWidth)"
}
require(maxHeight >= minHeight) {
"maxHeight($maxHeight) must be >= than minHeight($minHeight)"
}
require(minWidth >= 0 && minHeight >= 0) {
"minWidth($minWidth) and minHeight($minHeight) must be >= 0"
}
return Constraints.createConstraints(minWidth, maxWidth, minHeight, maxHeight)
}
在测量期间,基于约束
,宽度和高度被分配给组合成为可放置对象
。
在下面的示例中,当TextField没有具有固定大小的父级时,它会增长到最大宽度。如果设置了小于TextField的固定大小,并使用Modifier.widthIn(),则TextField将设置为父级宽度,而Modifier.requiredWidthIn()则会跳出父级,直到(TextField大小 - 父级大小)/ 2。
![enter image description here](https://istack.dev59.com/K1BT4.gif)
@Composable
private fun TextFieldSamples() {
Column(
modifier = Modifier
.padding(20.dp).border(2.dp, Color.Cyan)
) {
var text1 by remember { mutableStateOf("") }
Column(modifier = Modifier) {
TextField(
modifier = Modifier
.border(2.dp, Color.Green)
.widthIn(56.dp),
value = text1,
onValueChange = { text1 = it }
)
TextField(
modifier = Modifier
.border(2.dp, Color.Red)
.requiredWidthIn(56.dp),
value = text1, onValueChange = { text1 = it })
}
Spacer(modifier = Modifier.height(30.dp))
var text2 by remember { mutableStateOf("") }
Column(modifier = Modifier.width(50.dp)) {
TextField(
modifier = Modifier
.border(2.dp, Color.Green)
.widthIn(56.dp),
value = text2, onValueChange = { text2 = it })
TextField(
modifier = Modifier
.border(2.dp, Color.Red)
.requiredWidthIn(56.dp),
value = text2, onValueChange = { text2 = it })
}
}
}
尺寸修饰符
Modifier.width/height()
返回具有固定约束或具有相等的minWidth/Height和maxWidth/Height的约束。
因此,子组件受到此约束的限制。
Modifier.fillmaxWidth/Height(fraction)
覆盖父级最大约束可用空间的一部分(比例为fraction)
Modifier.width/heightIn(min)
将此值保留为最小宽度/高度,以便使用此维度测量子组件。子组件可以低于此值或高于最大宽度/高度。
Modifier.width/heightIn(max)
这是可以使用的最大宽度/高度。子组件不能使用大于最大宽度/高度的尺寸进行测量。
@Composable
private fun ConstraintsSample1() {
Text(text = "Fixed Size")
BoxWithConstraints(modifier = Modifier
.size(100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(50.dp)
.background(Color.Red))
}
Spacer(modifier=Modifier.height(10.dp))
BoxWithConstraints(modifier = Modifier
.size(100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(150.dp)
.background(Color.Red))
}
Text(text = "widthIn(min)")
BoxWithConstraints(modifier = Modifier
.widthIn(min = 100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(50.dp)
.background(Color.Red))
}
Spacer(modifier=Modifier.height(10.dp))
BoxWithConstraints(modifier = Modifier
.widthIn(min = 100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(150.dp)
.background(Color.Red))
}
Text(text = "widthIn(max)")
BoxWithConstraints(modifier = Modifier
.widthIn(max = 100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(50.dp)
.background(Color.Red))
}
Spacer(modifier=Modifier.height(10.dp))
BoxWithConstraints(modifier = Modifier
.widthIn(max = 100.dp)
.border(3.dp, Color.Green)) {
Box(modifier = Modifier
.size(150.dp)
.background(Color.Red))
}
}
Modifier.requiredWidth/Height()
当您设置Modifier.size(50.dp).size(100.dp)
时,首先应用第一个大小修饰符,但是如果您使用requiredIn
Modifier.size(50.dp).requiredSizeIn(100.dp)
100.dp被指定,但布局放置在两个尺寸差的一半位置。
@Composable
private fun ConstraintsSample2() {
Column(modifier = Modifier
.fillMaxSize()
.padding(30.dp)
.border(4.dp, Color.Cyan)) {
Text(text = "Chaining size modifiers")
Box(modifier = Modifier
.size(50.dp)
.background(Color.Yellow))
Box(modifier = Modifier
.size(50.dp)
.size(100.dp)
.background(Color.Red))
Box(modifier = Modifier
.size(50.dp)
.requiredSizeIn(100.dp)
.background(Color.Green))
Text(text = "widthIn(max)")
BoxWithConstraints(
modifier = Modifier
.width(100.dp)
.border(3.dp, Color.Green)
) {
Box(
modifier = Modifier
.requiredWidthIn(min = 20.dp, max = 50.dp)
.height(50.dp)
.background(Color.Red)
)
}
Spacer(modifier = Modifier.height(10.dp))
BoxWithConstraints(
modifier = Modifier
.width(100.dp)
.border(3.dp, Color.Green)
) {
Box(
modifier = Modifier
.requiredWidthIn(min = 150.dp, max = 200.dp)
.height(50.dp)
.background(Color.Red)
)
}
}
}
限制条件
限制条件会随着尺寸修改器、垂直/水平滚动或父级选择限制或想要使用最小或最大维度而发生变化。
在我的设备上,最大设备宽度为1080像素,在下面的示例中,200.dp相当于525像素。并且使用了verticalScroll,因此高度是用Constraints.Infinity
来测量的。
@Composable
fun ConstraintsSample3()
Spacer(modifier = Modifier.height(10.dp))
Text(text = "FillMaxWidth and 200.dp Height")
BoxWithConstraints(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(Red400)
)
Spacer(modifier = Modifier.height(10.dp))
Text(text = "wrapContentSize()")
BoxWithConstraints(
modifier = Modifier
.wrapContentSize()
.background(Orange400)
)
Spacer(modifier = Modifier.height(10.dp))
Text(text = "200.dp Width and Height")
BoxWithConstraints(
modifier = Modifier
.width(200.dp)
.height(200.dp)
.background(Green400)
)
}
}
@Composable
private fun BoxWithConstraintsSample4() {
Text(text = "200.dp WidthIn(min) and HeightIn(min)")
BoxWithConstraints(
modifier = Modifier
.widthIn(min = 200.dp)
.heightIn(200.dp)
.background(Blue400)
) {
val hasBoundedWidth = constraints.hasBoundedWidth
val hasFixedWidth = constraints.hasFixedWidth
val minWidth = constraints.minWidth
val maxWidth = constraints.maxWidth
val hasBoundedHeight = constraints.hasBoundedHeight
val hasFixedHeight = constraints.hasFixedHeight
val minHeight = constraints.minHeight
val maxHeight = constraints.maxHeight
Text(
"minWidth: $minWidth, maxWidth: $maxWidth\n" +
"hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
"minHeight: $minHeight, maxHeight: $maxHeight\n" +
"hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
color = Color.White
)
}
Text(text = "200.dp requiredWidth(min) and requiredHeight(min)")
BoxWithConstraints(
modifier = Modifier
.requiredWidthIn(min = 200.dp)
.requiredHeightIn(200.dp)
.background(Pink400)
) {
val hasBoundedWidth = constraints.hasBoundedWidth
val hasFixedWidth = constraints.hasFixedWidth
val minWidth = constraints.minWidth
val maxWidth = constraints.maxWidth
val hasBoundedHeight = constraints.hasBoundedHeight
val hasFixedHeight = constraints.hasFixedHeight
val minHeight = constraints.minHeight
val maxHeight = constraints.maxHeight
Text(
"minWidth: $minWidth, maxWidth: $maxWidth\n" +
"hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
"minHeight: $minHeight, maxHeight: $maxHeight\n" +
"hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
color = Color.White
)
}
Text(text = "200.dp defaultMinSize()")
BoxWithConstraints(
modifier = Modifier
.defaultMinSize(200.dp)
.background(Pink400)
) {
val hasBoundedWidth = constraints.hasBoundedWidth
val hasFixedWidth = constraints.hasFixedWidth
val minWidth = constraints.minWidth
val maxWidth = constraints.maxWidth
val hasBoundedHeight = constraints.hasBoundedHeight
val hasFixedHeight = constraints.hasFixedHeight
val minHeight = constraints.minHeight
val maxHeight = constraints.maxHeight
Text(
"minWidth: $minWidth, maxWidth: $maxWidth\n" +
"hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
"minHeight: $minHeight, maxHeight: $maxHeight\n" +
"hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
color = Color.White
)
}
Text(text = "200.dp WidthIn(max)")
BoxWithConstraints(
modifier = Modifier
.widthIn(max = 200.dp)
.background(Purple400)
) {
val hasBoundedWidth = constraints.hasBoundedWidth
val hasFixedWidth = constraints.hasFixedWidth
val minWidth = constraints.minWidth
val maxWidth = constraints.maxWidth
val hasBoundedHeight = constraints.hasBoundedHeight
val hasFixedHeight = constraints.hasFixedHeight
val minHeight = constraints.minHeight
val maxHeight = constraints.maxHeight
Text(
"minWidth: $minWidth, maxWidth: $maxWidth\n" +
"hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
"minHeight: $minHeight, maxHeight: $maxHeight\n" +
"hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
color = Color.White
)
}
}
requireWidth
和高度吗? - Kotlin Learner