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 主要关注布局和对齐。