Jetpack Compose中文字无法容纳时如何切换不同布局方案？

要实现这个逻辑，核心是借助Jetpack Compose的SubcomposeLayout组件，它支持先对子组件进行预先测量，拿到尺寸结果后再决定最终的布局逻辑，完美适配“先判断文本能否放进固定尺寸Box，再决定文本摆放位置”的需求。

完整实现代码 #

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.SubcomposeLayout
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun AdaptiveTextBox(
    text: String,
    boxSize: Dp = 40.dp,
    modifier: Modifier = Modifier
) {
    // 把固定Box的dp尺寸转为像素值，用于后续尺寸对比
    val boxSizePx = with(LocalDensity.current) { boxSize.toPx() }

    SubcomposeLayout(modifier = modifier) { constraints ->
        // 第一步：预先测量文本的实际宽高，会自动响应系统字体大小缩放配置
        val preMeasureText = subcompose(slotId = "pre_measure") {
            BasicText(text = text)
        }.first()
        val textPlaceable = preMeasureText.measure(constraints)

        // 判断文本是否能完全放入固定尺寸的Box内
        val canFitInBox = textPlaceable.width <= boxSizePx && textPlaceable.height <= boxSizePx

        // 第二步：根据判断结果生成最终要渲染的布局
        val finalContent = if (canFitInBox) {
            // 文本放得下：直接放在Box内部
            subcompose(slotId = "fit_layout") {
                Box(modifier = Modifier.size(boxSize), contentAlignment = Alignment.Center) {
                    BasicText(text = text)
                }
            }
        } else {
            // 文本放不下：用Column布局，文本放在Box下方
            subcompose(slotId = "unfit_layout") {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Box(modifier = Modifier.size(boxSize)) {
                        // 此处可填写Box原本要展示的其他内容，比如图标、占位图等
                    }
                    BasicText(text = text)
                }
            }
        }

        // 测量最终布局的总宽高，完成摆放
        val finalPlaceables = finalContent.map { it.measure(constraints) }
        val totalWidth = finalPlaceables.maxOf { it.width }
        val totalHeight = finalPlaceables.sumOf { it.height }

        layout(totalWidth, totalHeight) {
            var currentY = 0
            finalPlaceables.forEach { placeable ->
                // 内容水平居中摆放
                placeable.placeRelative(x = (totalWidth - placeable.width) / 2, y = currentY)
                currentY += placeable.height
            }
        }
    }
}

// 调用示例
@Composable
fun MyView() {
    AdaptiveTextBox(text = "你要展示的文本内容")
}

补充说明 #

如果你能接受两次重组的性能损耗，也可以用更简单的state控制方案：给Text添加onTextLayout回调获取文本实际尺寸，更新state变量后再根据state切换布局，代码可读性更高但性能略低于上述的SubcomposeLayout实现。

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