composeUI中Box 和 Surface的区别

在 Jetpack Compose 中，Box 和 Surface 都是常用的布局组件，但它们的用途和功能有所不同。

Box 组件：

• 功能：Box 是一个用于将子组件堆叠在一起的布局容器，类似于传统 Android 中的 FrameLayout。
• 用途：适用于需要将多个子组件重叠显示的场景，例如在同一位置显示文本和图像。
• 特点：Box 允许子组件相互覆盖，并提供对齐和尺寸控制。

Box(
    modifier = Modifier
        .size(150.dp)
        .background(Color.Green)
) {
    Box(
        modifier = Modifier
            .size(80.dp)
            .background(Color.Red)
    )
    Text(
        text = "Hello",
        modifier = Modifier.align(Alignment.Center)
    )
}

Surface 组件：

• 功能：Surface 是一个用于设置背景颜色、形状、阴影等属性的容器，遵循 Material Design 的设计规范。
• 用途：用于创建具有特定视觉效果的区域，例如卡片、按钮等。
• 特点：Surface 提供了对形状、颜色、阴影和边框的控制，方便实现一致的视觉效果。

Surface(
    shape = RoundedCornerShape(8.dp),
    shadowElevation = 10.dp,
    modifier = Modifier
        .height(100.dp)
        .background(Color.Red)
) {
    Row {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red),
            contentScale = ContentScale.Crop
        )
        Spacer(modifier = Modifier.padding(horizontal = 12.dp))
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center
        ) {
            Text(text = "Liratie", style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.padding(vertical = 8.dp))
            Text(text = "谭祖爱")
        }
    }
}

主要区别：

• 功能定位：Box 主要用于布局和对齐子组件，而 Surface 主要用于设置视觉效果，如背景颜色、形状和阴影等。
• 使用场景：Box 适用于需要堆叠和对齐子组件的场景，Surface 适用于需要设置背景、形状和阴影的场景。
• 属性支持：Surface 提供了更多与视觉效果相关的属性，如 shape、color、shadowElevation 和 border，而 Box 主要关注布局和对齐。