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

---

前言

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

---

Box 组件的参数说明

@Composable
inline fun Box(
    modifier: Modifier = Modifier,                      //修饰符
    contentAlignment: Alignment = Alignment.TopStart,   //内容对齐方式
    propagateMinConstraints: Boolean = false,           //是否将最小尺寸值设置给子 View ，默认为false
    content: @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 只是简单的设置颜色和大小