如何在Jetpack Compose中基于内容实现自适应完美正方形Box

需求说明 #

需要创建一个内部包含文本的正方形Box组件，满足以下要求：

• 严格保持1:1宽高比，为完美正方形
• 最小尺寸为24x24dp
• 内容尺寸小于24dp时，组件维持24x24dp的最小正方形
• 内容尺寸超过24dp时，组件自适应内容大小，同时保持正方形比例

现有方案的问题 #

之前尝试的三种实现方式均无法满足需求：

• 仅设置.defaultMinSize(24.dp, 24.dp)：组件能适配内容、满足最小尺寸，但无法保证正方形比例
• 同时设置.defaultMinSize(24.dp, 24.dp)和.aspectRatio(1f)：组件会自动占满父布局的最大宽度，无法根据内容自适应
• 用.sizeIn(minWidth = 24.dp, minHeight = 24.dp, maxWidth = 48.dp, maxHeight = 48.dp)搭配.aspectRatio(1f)：组件固定为48x48dp，即使内容尺寸远小于该值

正确实现方案 #

通过自定义Layout组件可以精准控制测量和布局过程，完美满足所有需求：

@Composable
fun SquareBox(
    text: String,
    minSize: Dp = 24.dp,
) {
    val minSizePx = with(LocalDensity.current) { minSize.toPx() }
    
    Layout(
        content = {
            Text(
                text = text,
                color = Color.White,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        modifier = Modifier
            .clip(RoundedCornerShape(4.dp))
            .background(Color.Gray)
    ) { measurables, constraints ->
        // 测量内部文本的实际尺寸
        val textPlaceable = measurables.first().measure(constraints)
        
        // 计算正方形边长：取文本宽高、最小尺寸三者的最大值
        val sideLength = maxOf(
            textPlaceable.width,
            textPlaceable.height,
            minSizePx.toInt()
        )
        
        // 设置布局为正方形尺寸
        layout(sideLength, sideLength) {
            // 将文本居中放置在正方形内
            textPlaceable.place(
                x = (sideLength - textPlaceable.width) / 2,
                y = (sideLength - textPlaceable.height) / 2
            )
        }
    }
}

方案原理 #

1. 测量内容尺寸：先获取内部文本的实际宽高，确保准确知晓内容所需空间
2. 计算正方形边长：以文本宽高的最大值为基础，同时保证不低于设定的最小尺寸，既适配内容又满足最小要求
3. 强制正方形布局：将组件的宽高统一设置为计算出的边长，严格维持1:1比例
4. 内容居中：把文本放置在正方形的中心位置，保证视觉效果合理

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