如何根据Composable的尺寸条件性添加该组件？

问题背景 #

我有一个BoxWithConstraints父Composable，已知它的尺寸为200dp宽、100dp高。需要实现：仅当子Composable的自身尺寸能完全适配父组件时，才将其显示出来。核心要解决两个问题：

• 不显示子组件的前提下，测量它的原始尺寸
• 根据测量结果条件性添加子组件

我曾尝试用.onSizeChanged和.drawWithContent{}先测量再判断，但得到的尺寸结果错误，条件判断完全失效：

@Composable
fun PseudoView() {
    BoxWithConstraints(
        Modifier.size(width = 200.dp, height = 100.dp)
    ) {
        var childSize = placeholder
        Child(modifier = Modifier
            .wrapContentSize()
            .onSizeChanged { childSize = it }
            .drawWithContent {} // 仅用来测量的子组件
        )
        val (childWidth, childHeight) = childSize 
        if (childWidth <= 200.dp && childHeight <= 100.dp) { // 条件判断结果错误
            Child()
        }
    }
}

解决方案 #

方法一：使用SubcomposeLayout（推荐） #

SubcomposeLayout支持分阶段子组合，可以先测量子组件的原始尺寸，再决定是否显示它，完美适配需求：

@Composable
fun ConditionalChildContainer(
    parentWidth: Dp,
    parentHeight: Dp,
    childContent: @Composable () -> Unit
) {
    // 将父组件的dp尺寸转为像素值（测量结果为像素单位）
    val parentWidthPx = with(LocalDensity.current) { parentWidth.toPx() }
    val parentHeightPx = with(LocalDensity.current) { parentHeight.toPx() }

    SubcomposeLayout { constraints ->
        // 第一步：子组合并测量子组件的原始尺寸（不受父约束限制）
        val childMeasurable = subcompose("measureChild", childContent).first()
        val childPlaceable = childMeasurable.measure(Constraints())
        
        // 判断子组件是否能适配父布局
        val canFit = childPlaceable.width <= parentWidthPx && childPlaceable.height <= parentHeightPx

        // 第二步：布局容器本身
        layout(constraints.maxWidth, constraints.maxHeight) {
            if (canFit) {
                // 如果能适配，放置子组件到容器中
                childPlaceable.place(0, 0)
            }
        }
    }
}

// 使用示例
@Composable
fun PseudoView() {
    val parentWidth = 200.dp
    val parentHeight = 100.dp
    BoxWithConstraints(Modifier.size(parentWidth, parentHeight)) {
        ConditionalChildContainer(parentWidth, parentHeight) {
            Child()
        }
    }
}

方法二：自定义Layout组件 #

如果需要更精细的布局控制，可以直接自定义Layout：

@Composable
fun ConditionalChildLayout(
    parentWidth: Dp,
    parentHeight: Dp,
    child: @Composable () -> Unit
) {
    val density = LocalDensity.current
    val parentWidthPx = density.run { parentWidth.toPx() }
    val parentHeightPx = density.run { parentHeight.toPx() }

    Layout(content = child) { measurables, constraints ->
        // 测量子组件的原始尺寸
        val childMeasurable = measurables.first()
        val childPlaceable = childMeasurable.measure(Constraints())

        // 判断适配性
        val canFit = childPlaceable.width <= parentWidthPx && childPlaceable.height <= parentHeightPx

        // 布局容器
        layout(constraints.maxWidth, constraints.maxHeight) {
            if (canFit) {
                childPlaceable.placeRelative(0, 0)
            }
        }
    }
}

// 使用示例
@Composable
fun PseudoView() {
    val parentSize = 200.dp to 100.dp
    BoxWithConstraints(Modifier.size(parentSize.first, parentSize.second)) {
        ConditionalChildLayout(parentSize.first, parentSize.second) {
            Child()
        }
    }
}

原方案失效原因 #

你之前的代码存在两个关键问题：

1. 单位不匹配：onSizeChanged返回的是像素值，你直接与dp值比较，导致判断逻辑完全错误（比如200dp在3x密度屏幕上对应600px，子组件180dp对应540px，540 <= 200显然不成立）
2. 重组时机问题：Compose重组基于状态变化，第一次重组时childSize是占位符，条件判断先执行；之后onSizeChanged更新childSize，但此时条件分支已执行完毕，不会触发重组来显示子组件。

内容的提问来源于stack exchange，提问作者user2100776