Compose | UI组件(十) | Box,Surface - 帧布局

---

前言

Box组件是 按子组件依次叠加 的布局组件，相当传统View中的 FrameLayout

---

Box 组件的参数说明

@Composable
inline fun Box(modifier: Modifier = Modifier,                      //修饰符contentAlignment: Alignment = Alignment.TopStart,   //内容对齐方式propagateMinConstraints: Boolean = false,           //是否将最小尺寸值设置给子 View ，默认为falsecontent: @Composable BoxScope.() -> Unit            //Box作用域
)

Box 组件的使用

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

Surface 的参数说明

Surface组件是将多个组件摆放平面上，可以设置平面边框，圆角，颜色等。

@Composable
@NonRestartableComposable
fun Surface(modifier: Modifier = Modifier,                    //修饰符shape: Shape = RectangleShape,                    //设置布局形状color: Color = MaterialTheme.colorScheme.surface, //设置内容颜色contentColor: Color = contentColorFor(color),     //设置tonalElevation: Dp = 0.dp,                        //当color=ColorScheme.surface时，值越大，浅色主题越深，深色主题越浅shadowElevation: Dp = 0.dp,                       //阴影大小border: BorderStroke? = null,                     //设置边框content: @Composable () -> Unit
)

注：
Surface 与 Box 区别在于可以快速设置界面的形状，阴影，边框，颜色等，而 Box 只是简单的设置颜色和大小

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 = "谭祖爱")}}
}

---

总结

1. Box组件是 按子组件依次叠加 的布局组件，相当传统View中的 FrameLayout
2. Surface组件是将多个组件摆放平面上，可以设置平面边框，圆角，颜色等
3. Surface 与 Box 区别在于可以快速设置界面的形状，阴影，边框，颜色等，而 Box 只是简单的设置颜色和大小