Android Compose——尺寸修饰符的调用顺序构成的不同尺寸约束效果

在Compose中，Modifier是可以链式调用的，且调用顺序对其最终的展示效果有影响。本篇就Modifier中的尺寸修饰符调用顺序导致的不同尺寸约束展开讨论。

一 尺寸修饰符有哪些

（一）.size()

.

此尺寸修饰符有上述三个重载方法，若只传入一个值，则会将宽高都设置为一样的；若传入两个值则可指定宽高值。

注意：链式多次调用.size()修饰符并不会造成覆盖，最终效果还是与第一个.size()一致。

设置.size()修饰符会在满足最小宽高和最大宽高的约束下，将控件的宽高值和宽高值都设置为指定的确定值。

• 若指定的宽高小于 最小宽高，则，受最小宽高约束，最终控件的大小仍为最小宽高。
• 若指定的宽高大于 最大宽高，则，受最大宽高约束，最终控件的宽高仍为最大宽高。

若控件的大小刚好处于最小和最大宽高之间，则设置.size()会将控件的最小和最大宽高修改为设置的确定的值。

（二）.sizeIn()

上述为此尺寸修饰符的参数。

与.size()修饰符相反，.sizeIn()修饰符可以为控件设置一个宽高尺寸范围，而不是确定的值。

（三）.requireSize()

.requireSize()修饰符同样有上述三个重载方法，与.size()修饰符很像，但不同的是，它的优先级比.size()高，也就是说**.requireSize()在.size()之后调用，是可以覆盖.size()修饰符产生的效果的**。

（四）.fillMaxSize()

.fillMaxSize()修饰符只有一个参数，且有默认值为1，该参数表示填充父布局的比例（0-1之间）。

默认不填参数的话，会填充整个父布局。

.fillMaxSize()会将控件的最小宽高度都设置为父布局的宽高。

（五）.wrapContentSize()

.wrapContentSize()的参数如上，且都有默认值，align参数可以设置控件的对其方式，默认是居中对齐，unbounded参数可以设置控件是否无视最大宽高限制，默认为false，即不无视。

调用.wrapContentSize()若不填充任何参数，则控件会在满足最小宽高的限制内，尽可能适配控件自身的大小。

• 若控件尺寸在最小宽高和最大宽高之间，则控件实际展示宽高与其自身一致
• 若控件小于最小宽高限制，则宽高会被设置为最小宽高。
• 若控件大于最大宽高限制，且unbounded被设置为了true，即无视最大限制，那么最终控件的宽高还是按照自身展示，但由于最大限制的存在，最终展示出来的效果可能是被裁剪（不完整）的效果；
• 若控件大于最大宽高限制，且unbounded被设置为了false，则控件还是会受最大限制的制约，会进行一定的缩放，将其限制在最大限制内，也就不会产生裁剪效果了。

.wrapContentSize()会重置控件的最小宽高约束为一个区间值（0-最小约束值）。

二 尺寸修饰符调用顺序造成的不同约束效果

案例一

代码

@Preview
@Composable
fun SizeOrderTest() {
    Column(
        modifier = Modifier
            .background(Color.White)
            .size(400.dp)
    ) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background), "",
            modifier = Modifier
                .fillMaxSize()
                .size(50.dp)
        )

    }
}

实际效果

原因

.fillMaxSize()将iamge的最小宽高修改为了父布局的大小400dp，导致image铺满父布局

.size(50.dp)尝试修改image的宽高为50dp，但受限于最小宽高400dp的影响，最终展示的尺寸还是400dp宽高。

案例二

代码

@Preview
@Composable
fun SizeOrderTest() {
    Column(
        modifier = Modifier
            .background(Color.White)
            .size(400.dp)
    ) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background), "",
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize()
                .size(50.dp)
        )

    }
}

实际效果

原因

.fillMaxSize()将iamge的最小宽高修改为了父布局的大小400dp，导致image铺满父布局

.wrapContentSize()有两个参数，此处没有填写参数值，沿用默认值（居中对齐+受最大宽高约束），同时重置了image的最小宽高值为0-400dp的区间。

.size(50.dp)，由于.wrapContentSize()重置过后，最小宽高处于0-400dp的区间，50dp处于此区间内，同时也小于最大宽高400dp，故最终image的宽高成功修改为50dp