Compose 中 fillMaxHeight 和 fillMaxWidth 的正确分数参数获取指南

在 Compose 中获取 fillMaxHeight(...) 和 fillMaxWidth(...) 的正确分数参数

引言

在 Compose 中，正确使用 fillMaxHeight(...) 和 fillMaxWidth(...) 修饰符至关重要，以确保组件在不同屏幕尺寸和分辨率上始终按比例缩放。本指南将深入探讨如何获取用于这些函数的适当分数参数，并解决屏幕方向更改时的影响。

获取分数参数

分数参数表示组件应该填满可用空间的比例。例如，fillMaxHeight(0.5f) 将使组件填满一半的可用高度。要计算正确的分数，需要考虑当前组件的高度和整个屏幕的高度：

val fractionHeight = currentHeight / screenHeight
val fractionWidth = currentWidth / screenWidth

获取屏幕高度和宽度

屏幕高度和宽度可以通过 LocalConfiguration 对象获得：

val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp

屏幕方向更改

当屏幕方向更改时，高度和宽度将互换。因此，需要更新分数参数以反映更改：

if (isPortrait) {
    val fractionHeight = currentHeight / screenHeight
    val fractionWidth = currentWidth / screenWidth
} else {
    val fractionHeight = currentWidth / screenHeight
    val fractionWidth = currentHeight / screenWidth
}

示例

下面的示例代码展示了如何使用 fillMaxHeight 和 fillMaxWidth 修饰符，并根据屏幕方向更新分数参数：

@Composable
fun MyComponent() {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp
    
    val fractionHeight = if (isPortrait) currentHeight / screenHeight else currentWidth / screenHeight
    val fractionWidth = if (isPortrait) currentWidth / screenWidth else currentHeight / screenWidth
    
    Box(modifier = Modifier
        .fillMaxHeight(fractionHeight)
        .fillMaxWidth(fractionWidth)
    ) {
        // ...
    }
}

常见问题解答

1. 为什么使用分数而不是固定的 dp 值？
   分数允许组件在所有屏幕尺寸上按比例缩放，确保一致的外观。

2. 如何处理嵌套组件？
   嵌套组件的总分数不能超过 1。例如，如果父组件使用 fillMaxHeight(0.5f)，则子组件不能使用 fillMaxHeight(1.0f)。

3. 屏幕方向更改时，分数是否需要立即更新？
   是。在方向更改时，需要更新分数以反映新方向的可用空间。

4. 是否有更好的方法来处理屏幕方向更改？
   使用 ConstraintLayout 或 BoxWithConstraints 等布局可以更轻松地处理屏幕方向更改，而不必手动更新分数。

5. 是否存在其他替代 fillMaxHeight 和 fillMaxWidth？
   可以使用 weight 和 size 修饰符来实现类似的效果，但 fillMaxHeight 和 fillMaxWidth 通常更方便。