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