Modifier.fillMaxHeight() 局限性及解决办法：应对父布局换行

2024-03-07 04:41:53

Jetpack Compose 中 Modifier.fillMaxHeight() 的局限性及应对措施

引言

在 Jetpack Compose 中，Modifier.fillMaxHeight() 用于设置子布局的高度以填满其父布局。然而，当父布局内容换行时，Modifier.fillMaxHeight() 的效果可能不如预期。本文将探讨这一局限性并提供应对措施。

局限性

Modifier.fillMaxHeight() 的高度值取决于其父布局的高度。当父布局内容换行时，父布局的高度会更新，导致子布局的高度不正确。

应对措施

方法 1：使用权重

向中间列应用权重，强制它填满剩余空间，并将父布局的高度传递给子布局。

Row(
    modifier = Modifier
        .width(200.dp)
        .wrapContentHeight()
) {
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .width(48.dp)
            .background(Color.Red)
    ) {
        // ...
    }
    Column(modifier = Modifier.weight(1f)) {
        Text(
            text = "Title" + "\n" + "Expand" + "\n" + "Expand" + "\n" + "Expand",
        )
        // ...
    }
    Column(modifier = Modifier.width(48.dp)) {
        // ...
    }
}

方法 2：使用 BoxWithConstraints

BoxWithConstraints 可以访问父布局的约束信息，允许动态调整子布局的高度。

Row(
    modifier = Modifier
        .width(200.dp)
        .wrapContentHeight()
) {
    BoxWithConstraints(
        modifier = Modifier
            .fillMaxHeight()
            .width(48.dp)
    ) {
        val maxHeight = maxHeight
        Column(modifier = Modifier.height(maxHeight)) {
            // ...
        }
    }
    Column(modifier = Modifier.weight(1f)) {
        Text(
            text = "Title" + "\n" + "Expand" + "\n" + "Expand" + "\n" + "Expand",
        )
        // ...
    }
    Column(modifier = Modifier.width(48.dp)) {
        // ...
    }
}