Jetpack Compose中如何让Box布局实现内容包裹？

在Jetpack Compose开发中，默认情况下Box会占满父布局的可用空间，若想让Box仅包裹其子控件（如示例中的Switch），需要调整Box的尺寸约束。

原代码示例 #

@Composable
fun TestScreen(modifier: Modifier = Modifier) {
    Box(modifier = Modifier.background(Color.Yellow)){
        val switchState = remember { mutableStateOf(true) }
        Switch(
            checked = switchState.value,
            enabled= true,
            onCheckedChange = { switchState.value = it }
        )
    }
}

当前效果：

解决方案 #

只需给Box的Modifier添加wrapContentSize()修饰符，即可让Box根据子控件的尺寸自动调整自身大小，实现内容包裹效果。修改后的代码如下：

@Composable
fun TestScreen(modifier: Modifier = Modifier) {
    Box(modifier = Modifier
        .background(Color.Yellow)
        .wrapContentSize() // 添加该修饰符实现内容包裹
    ){
        val switchState = remember { mutableStateOf(true) }
        Switch(
            checked = switchState.value,
            enabled= true,
            onCheckedChange = { switchState.value = it }
        )
    }
}

如果需要单独控制宽度或高度的包裹，也可以分别使用wrapContentWidth()和wrapContentHeight()修饰符，按需组合即可。

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