Jetpack Compose 修改器 wrapContentMaxHeight

您可以使用layout修饰符，它允许您更改包装元素的测量和布局方式。虽然fillMaxHeight将Constraints.minHeight和设置Constraints.maxHeight为等于 乘以Constraints.maxHeight，fraction但您只想对 和 执行此操作，maxHeight而不是minHeight。使用layout，您可以做到这一点：

Box(
  modifier = Modifier.layout { measurable, constraints ->
    val adjustedConstraints = if (constraints.maxHeight != Constraints.Infinity) {
      constraints.copy(maxHeight = (constraints.maxHeight * 0.8).roundToInt())
    } else {
      constraints
    }
    val placeable = measurable.measure(adjustedConstraints)
    layout(placeable.width, placeable.height) {
      placeable.place(0, 0)
    }
  }
)

您可以轻松地将其提取为具有参数Modifier的可重复使用的扩展函数fraction。

是的，您可以在 Jetpack Compose 中编写一个 Modifier 来实现所需的行为。要包裹内容高度但将其限制为最大可用高度的 80%，您可以使用 Modifier.heightIn() 函数以及 LocalDensity 和 BoxWithConstraints 提供的动态值。

虽然我不知道修饰符可以做到这一点，但您可以使用Column，weights但设置fill为false：

@Composable
fun EightyTwenty(
    eighty: @Composable BoxScope.() -> Unit,
    twenty: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(modifier) {
        Box(
            modifier = Modifier.weight(8f, fill = false),
            content = eighty,
        )

        Box(
            modifier = Modifier.weight(2f),
            content = twenty
        )
    }
}

我已经创建了一个预览，以便您可以轻松地测试它：

@Preview
@Composable
private fun EightyTwentyPreview() {

    EightyTwenty(
        eighty = {
            TextColumn(
                lines = 100, // alternatively, use 10 for short content
                backgroundColor = Color.Green
            )
        },
        twenty = {
            TextColumn(
                lines = 10,
                backgroundColor = Color.Red
            )
        },

        modifier = Modifier
            .width(200.dp)
            .height(300.dp)
            .background(Color.White)
    )
}

@Composable
private fun TextColumn(
    lines: Int,
    backgroundColor: Color,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .verticalScroll(rememberScrollState())
            .background(backgroundColor)
    ) {
        repeat(lines) {
            Text("This is test ${it + 1} of $lines")
        }
    }
}