Jetpack Compose - 检测通过修改器应用的大小约束

Question

我如何检测内部的可组合什么高度约束是通过修饰符附加到它的？

Column1 {
    Text("abc")
    Text("abc")
}
Column2(Modifier.fillMaxHeight()) {
    Text("abc")
    Text("abc")
}
Column3(Modifier.height(200.dp)) {
    Text("abc")
    Text("abc")
}

我希望 Text（或其他可能的 Composable）具有不同的行为，具体取决于 Column 的高度是未指定、已指定还是已修复，或已指定并设置为 fillMaxHeight。这可能吗？

Answer 1

您可以使用 BoxWithConstraints 以便获得 min/max 宽度或高度或 Constraints 来检查您的可组合项是否固定或有界 width/height.

例如，这是一个动态框，我用来根据从另一个输入获得的大小设置尺寸，这样无论我需要的尺寸的比例如何，我都可以让它适合屏幕。

   BoxWithConstraints(
        modifier = modifier
            .fillMaxWidth()
            .height(120.dp),
        contentAlignment = Alignment.Center
    ) {

        val size = gradientColor.size
        val contentWidth = size.width
        val contentHeight = size.height
        val contentAspectRatio = contentWidth / contentHeight

        var boxHeight: Float = constraints.maxHeight.toFloat()
        var boxWidth: Float = boxHeight * contentAspectRatio

        if (boxWidth > constraints.maxWidth) {
            boxWidth = constraints.maxWidth.toFloat()
            boxHeight = (boxWidth / contentAspectRatio)

        }

       val boxWidthInDp: Dp
       val boxHeightInDp: Dp
       with(LocalDensity.current) {
         boxWidthInDp = boxWidth.toDp()
         boxHeightInDp = boxHeight.toDp()
       }

      Box(
        modifier = Modifier
            .height(boxHeightInDp)
            .width(boxWidthInDp)
            .background(brush, RoundedCornerShape(5.dp))
       )
}

我做了一个示例，说明在不同情况下如何从 BoxWithConstraints 返回值

 @Composable
fun BoxWithConstraintsExamples() {
    Column(modifier = Modifier) {

        BoxWithConstraints(modifier = Modifier.background(Color.Yellow)) {
            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"
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        BoxWithConstraints(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.Red)
        ) {
            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")
        }

        Spacer(modifier = Modifier.height(10.dp))

        BoxWithConstraints(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color.Green)
        ) {

            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, maxWidthDp: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight")
        }


        BoxWithConstraints(
            modifier = Modifier
                .widthIn(200.dp)
                .heightIn(200.dp)
                .background(Color.Magenta)
        ) {

            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" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight")
        }

    }
}

结果

Jetpack Compose - 检测通过修改器应用的大小约束

Jetpack Compose - Detect size constraint applied through Modifier

android

android-jetpack-compose