Jetpack Compose 条件布局与 Layout 内在测量详解

理解关键概念

Layout(content, modifier, measurePolicy) ：这个composable是你进入Compose布局系统的直接门户。你提供一个content lambda（你的子项）和一个measurePolicy lambda，所有魔法都在这里发生。
measurables ：在measurePolicy内部，measurables是传递给Layout composable的所有子项的列表。每个Measurable代表一个你可以查询和测量的子项。
constraints ：这个对象从Layout composable的父级传递下来。它定义了你的Layout composable（以及其子项）必须遵守的minWidth、maxWidth、minHeight和maxHeight。关键的是，constraints.maxHeight告诉我们可用的总垂直空间。

measurable.minIntrinsicHeight(width) ：这是我们解决方案的英雄。它不给我们测量的高度（这会根据约束条件改变），而是告诉我们这个子项在给定width和无限高度的情况下_理想情况下需要的最小高度_。这是一个轻量级查询，避免了完整的布局传递。在处理未知内容大小时，这非常宝贵。
measurable.measure(constraints.copy(...)) ：然后我们使用动态修改的规则集调用measure()。constraints.copy(maxHeight = constraints.maxHeight - yOffset)表达式动态创建一个新的约束，将子项的高度限制为仅剩余的垂直空间。这会返回一个Placeable------测量后的子项，现在准备好进行定位。
placeable.place(x, y) ：所有测量完成后，调用layout lambda。在这里，你遍历Placeable对象，并使用它们的x和y坐标告诉Compose在屏幕上的确切绘制位置。

1. 内在测量（Intrinsic Measurement）基础

什么是内在测量？

内在测量允许组件在布局前先"询问"子组件在特定约束下的理想尺寸，从而实现更智能的布局决策。

内在测量类型

minIntrinsicWidth/ minIntrinsicHeight
maxIntrinsicWidth/ maxIntrinsicHeight

2. 基础内在测量示例

文本组件的内在测量

kotlin 复制代码

@Composable
fun IntrinsicTextExample() {
    val text = "Hello Jetpack Compose"
    
    Box(modifier = Modifier.background(Color.LightGray)) {
        Text(
            text = text,
            modifier = Modifier
                .widthIn(min = 100.dp, max = 200.dp)
                .background(Color.White)
        )
    }
}

3. 使用Layout组件实现条件布局

基础 Layout 组件结构

kotlin 复制代码

@Composable
fun ConditionalLayout(
    showCondition: Boolean,
    content: @Composable () -> Unit
) {
    Layout(
        content = content
    ) { measurables, constraints ->
        // 测量逻辑
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        
        // 布局逻辑
        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(0, 0)
            }
        }
    }
}

4. 智能宽度适配布局示例

根据内容动态调整布局

kotlin 复制代码

@Composable
fun SmartWidthLayout(
    showSideContent: Boolean,
    mainContent: @Composable () -> Unit,
    sideContent: @Composable () -> Unit
) {
    Layout(
        content = {
            mainContent()
            if (showSideContent) {
                sideContent()
            }
        }
    ) { measurables, constraints ->
        val mainMeasurable = measurables[0]
        val sideMeasurable = if (measurables.size > 1) measurables[1] else null
        
        // 测量主内容
        val mainPlaceable = mainMeasurable.measure(constraints)
        
        val sidePlaceable = sideMeasurable?.measure(
            constraints.copy(
                maxWidth = constraints.maxWidth - mainPlaceable.width
            )
        )
        
        val totalWidth = mainPlaceable.width + (sidePlaceable?.width ?: 0)
        val maxHeight = maxOf(mainPlaceable.height, sidePlaceable?.height ?: 0)
        
        layout(totalWidth, maxHeight) {
            mainPlaceable.placeRelative(0, 0)
            sidePlaceable?.placeRelative(mainPlaceable.width, 0)
        }
    }
}

5. 图解：条件布局的内在测量流程

复制代码

┌─────────────────────────────────────────┐
│          布局测量阶段                    │
├─────────────────────────────────────────┤
│ 1. 收集所有子组件                        │
│ 2. 根据条件筛选需要测量的组件            │
│ 3. 执行内在测量获取理想尺寸              │
│ 4. 根据测量结果计算最终布局              │
└─────────────────────────────────────────┘

6. 复杂条件布局示例

响应式网格布局

kotlin 复制代码

@Composable
fun ResponsiveGridLayout(
    items: List<String>,
    availableWidth: Int,
    threshold: Dp = 600.dp
) {
    val screenWidth = availableWidth.dp
    val columns = if (screenWidth < threshold) 2 else 4
    
    Layout(
        content = {
            items.forEach { item ->
                Box(
                    modifier = Modifier
                        .background(Color.Blue)
                        .padding(8.dp)
                ) {
                    Text(
                        text = item,
                        color = Color.White,
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    ) { measurables, constraints ->
        val itemWidth = constraints.maxWidth / columns
        val itemConstraints = constraints.copy(
            minWidth = itemWidth,
            maxWidth = itemWidth
        )
        
        val placeables = measurables.map { measurable ->
            measurable.measure(itemConstraints)
        }
        
        val itemHeight = placeables.maxOfOrNull { it.height } ?: 0
        val rows = (measurables.size + columns - 1) / columns
        
        layout(constraints.maxWidth, rows * itemHeight) {
            var x = 0
            var y = 0
            
            placeables.forEach { placeable ->
                placeable.placeRelative(x, y)
                x += itemWidth
                
                if (x + itemWidth > constraints.maxWidth) {
                    x = 0
                    y += itemHeight
                }
            }
        }
    }
}

7. 内在测量与条件布局结合

智能高度计算布局

kotlin 复制代码

@Composable
fun SmartHeightLayout(
    showHeader: Boolean,
    showFooter: Boolean,
    content: @Composable () -> Unit
) {
    Layout(
        content = {
            if (showHeader) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(56.dp)
                        .background(Color.Gray),
                    contentAlignment = Alignment.Center
                ) {
                    Text("Header")
                }
            }
            
            content()
            
            if (showFooter) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(48.dp)
                        .background(Color.DarkGray),
                    contentAlignment = Alignment.Center
                ) {
                    Text("Footer", color = Color.White)
                }
            }
        }
    ) { measurables, constraints ->
        var yPosition = 0
        
        // 测量所有组件
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        
        // 计算总高度
        val totalHeight = placeables.sumOf { it.height }
        
        layout(constraints.maxWidth, totalHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(0, yPosition)
                yPosition += placeable.height
            }
        }
    }
}

8. 图解：响应式布局适配过程

kotlin 复制代码

屏幕宽度变化流程：
┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   小屏幕     │ -> │   中屏幕     │ -> │   大屏幕     │
│   (2列)     │    │   (3列)     │    │   (4列)     │
└─────────────┘    └─────────────┘    └─────────────┘
     ↓                 ↓                 ↓
┌─────────┐       ┌─────────┐       ┌─────────┐
│ □ □     │       │ □ □ □   │       │ □ □ □ □ │
│ □ □     │       │ □ □ □   │       │ □ □ □ □ │
└─────────┘       └─────────┘       └─────────┘

9. 高级示例：自适应流式布局

kotlin 复制代码

@Composable
fun AdaptiveFlowLayout(
    items: List<String>,
    maxLines: Int? = null,
    modifier: Modifier = Modifier
) {
    var totalWidth by remember { mutableStateOf(0) }
    
    Box(modifier = modifier.fillMaxWidth()) {
        Layout(
            content = {
                items.forEach { item ->
                    Chip(
                        text = item,
                        modifier = Modifier.padding(4.dp)
                    )
                }
            }
        ) { measurables, constraints ->
            val spacing = 8
            var x = 0
            var y = 0
            var lineHeight = 0
            var currentLine = 1
            
            val placeables = measurables.map { measurable ->
                measurable.measure(constraints)
            }
            
            val positions = mutableListOf<Pair<Int, Int>>()
            
            placeables.forEach { placeable ->
                if (maxLines != null && currentLine > maxLines) {
                    return@forEach
                }
                
                if (x + placeable.width > constraints.maxWidth) {
                    x = 0
                    y += lineHeight + spacing
                    lineHeight = 0
                    currentLine++
                }
                
                if (maxLines != null && currentLine > maxLines) {
                    return@forEach
                }
                
                positions.add(x to y)
                x += placeable.width + spacing
                lineHeight = maxOf(lineHeight, placeable.height)
            }
            
            totalWidth = constraints.maxWidth
            val totalHeight = y + lineHeight
            
            layout(totalWidth, totalHeight) {
                placeables.forEachIndexed { index, placeable ->
                    if (index < positions.size) {
                        val (xPos, yPos) = positions[index]
                        placeable.placeRelative(xPos, yPos)
                    }
                }
            }
        }
    }
}

@Composable
fun Chip(text: String, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .background(
                color = Color(0xFFE0E0E0),
                shape = RoundedCornerShape(16.dp)
            )
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) {
        Text(
            text = text,
            fontSize = 14.sp,
            color = Color.Black
        )
    }
}

10. 性能优化技巧

使用 SubcomposeLayout 进行条件测量

kotlin 复制代码

@Composable
fun OptimizedConditionalLayout(
    condition: Boolean,
    primaryContent: @Composable () -> Unit,
    secondaryContent: @Composable () -> Unit
) {
    SubcomposeLayout { constraints ->
        val contentToMeasure = if (condition) {
            subcompose("primary", primaryContent)
        } else {
            subcompose("secondary", secondaryContent)
        }
        
        val placeables = contentToMeasure.map { measurable ->
            measurable.measure(constraints)
        }
        
        val maxWidth = placeables.maxOfOrNull { it.width } ?: 0
        val maxHeight = placeables.maxOfOrNull { it.height } ?: 0
        
        layout(maxWidth, maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(0, 0)
            }
        }
    }
}

11. 实际应用场景

聊天消息布局

kotlin 复制代码

@Composable
fun ChatMessageLayout(
    isOwnMessage: Boolean,
    showAvatar: Boolean,
    message: String,
    timestamp: String
) {
    Layout(
        content = {
            if (showAvatar && !isOwnMessage) {
                Avatar(modifier = Modifier.size(40.dp))
            }
            
            Column(modifier = Modifier.padding(horizontal = 8.dp)) {
                MessageBubble(message, isOwnMessage)
                Text(
                    text = timestamp,
                    fontSize = 12.sp,
                    color = Color.Gray
                )
            }
            
            if (showAvatar && isOwnMessage) {
                Avatar(modifier = Modifier.size(40.dp))
            }
        }
    ) { measurables, constraints ->
        val avatarMeasurable = if (showAvatar) measurables.find { 
            it == measurables.firstOrNull() || it == measurables.lastOrNull() 
        } else null
        
        val contentMeasurables = measurables - avatarMeasurable
        
        val avatarPlaceable = avatarMeasurable?.measure(constraints)
        val contentPlaceables = contentMeasurables.map { it.measure(constraints) }
        
        val totalWidth = (avatarPlaceable?.width ?: 0) + 
                        contentPlaceables.maxOfOrNull { it.width } ?: 0
        val totalHeight = maxOf(
            avatarPlaceable?.height ?: 0,
            contentPlaceables.sumOf { it.height }
        )
        
        layout(totalWidth, totalHeight) {
            var x = if (isOwnMessage) 0 else (avatarPlaceable?.width ?: 0)
            
            if (!isOwnMessage) {
                avatarPlaceable?.placeRelative(0, 0)
            }
            
            contentPlaceables.forEach { placeable ->
                placeable.placeRelative(x, 0)
            }
            
            if (isOwnMessage) {
                avatarPlaceable?.placeRelative(x + (contentPlaceables.maxOfOrNull { it.width } ?: 0), 0)
            }
        }
    }
}

这种结合条件布局和内在测量的方法可以创建出高度灵活、自适应的UI组件，能够智能地响应不同的屏幕尺寸和内容变化。