Android Jetpack Compose - Snackbar、Box

Snackbar

1、基本介绍

Snackbar 是一种轻量级反馈机制，它用于提供有关操作或动作的反馈
Snackbar 会在显示几秒后消失，也可以通过用户交互消失，包含一个可选的用户操作

2、基本使用

valscope=rememberCoroutineScope()valsnackbarHostState=remember{SnackbarHostState()}vardescbyremember{mutableStateOf("")}Box(modifier=Modifier.fillMaxSize()){Column(modifier=Modifier.fillMaxSize(),horizontalAlignment=Alignment.CenterHorizontally){Button(onClick={scope.launch{valreuslt=snackbarHostState.showSnackbar(message="这是一条 Snackbar",actionLabel="关闭",duration=SnackbarDuration.Short)when(reuslt){SnackbarResult.ActionPerformed->{desc="Snackbar 手动关闭"}SnackbarResult.Dismissed->{desc="Snackbar 自动关闭"}}}desc="Snackbar 显示"}){Text("显示 Snackbar")}Text(desc)}SnackbarHost(modifier=Modifier.align(Alignment.BottomCenter).padding(16.dp),hostState=snackbarHostState)}

Box

1、基本介绍

@ComposableinlinefunBox(modifier:Modifier=Modifier,contentAlignment:Alignment=Alignment.TopStart,propagateMinConstraints:Boolean=false,content:@ComposableBoxScope.()->Unit)

参数	说明
modifier	设置基础属性
contentAlignment	设置子元素的默认对齐方式
propagateMinConstraints	设置是否将最小约束传递给子元素
content	主要内容区域

2、基本使用

Box 的基本使用

Box(modifier=Modifier.size(200.dp).background(Color.LightGray)){Text("test1",modifier=Modifier.align(Alignment.BottomStart))Text("test2",modifier=Modifier.align(Alignment.TopEnd))}

Box(modifier=Modifier.fillMaxSize()){Text(text="居中文本",modifier=Modifier.align(Alignment.Center))Button(onClick={},modifier=Modifier.align(Alignment.BottomCenter)){Text("底部按钮")}}

使用 contentAlignment

Box(modifier=Modifier.size(200.dp).background(Color.LightGray),contentAlignment=Alignment.Center,){Text("test")}

子元素使用 matchParentSize 函数，填充父元素

Box(modifier=Modifier.size(200.dp)){Box(modifier=Modifier.matchParentSize().background(Color.Red.copy(alpha=0.3f)))Text("test",modifier=Modifier.align(Alignment.Center))}

3、使用 propagateMinConstraints

外部灰色 Box 的最小约束不会传递给子元素，导致内部红色 Box 尺寸为 0dp，外部灰色 Box 受尺寸范围与内部红色 Box 尺寸影响，尺寸为 100dp

Box(modifier=Modifier.background(Color.LightGray).widthIn(min=100.dp,max=300.dp).heightIn(min=100.dp,max=300.dp)){Box(modifier=Modifier.background(Color.Red.copy(alpha=0.3f)))}

外部灰色 Box 的最小约束会传递给子元素，导致内部红色 Box 尺寸为 100dp，外部灰色 Box 受尺寸范围与内部红色 Box 尺寸影响，尺寸为 100dp

Box(modifier=Modifier.background(Color.LightGray).widthIn(min=100.dp,max=300.dp).heightIn(min=100.dp,max=300.dp),propagateMinConstraints=true){Box(modifier=Modifier.background(Color.Red.copy(alpha=0.3f)))}

外部灰色 Box 的最小约束会传递给子元素，内部红色 Box 自定义尺寸为 150dp，外部灰色 Box 受尺寸范围与内部红色 Box 尺寸影响，尺寸为 150dp

Box(modifier=Modifier.background(Color.LightGray).widthIn(min=100.dp,max=300.dp).heightIn(min=100.dp,max=300.dp),propagateMinConstraints=true){Box(modifier=Modifier.size(150.dp).background(Color.Red.copy(alpha=0.3f)))}

4、子元素层级

后声明的子元素绘制在先声明的子元素之上

Box(modifier=Modifier.size(200.dp).background(Color.LightGray),){Box(modifier=Modifier.size(150.dp).background(Color.Red).align(Alignment.TopStart))Box(modifier=Modifier.size(150.dp).background(Color.Green).align(Alignment.Center))}

可以使用 zIndex 控制层级，zIndex 值越大，层级越高

Box(modifier=Modifier.size(200.dp).background(Color.LightGray).zIndex(1f),){Box(modifier=Modifier.size(150.dp).background(Color.Red).align(Alignment.TopStart).zIndex(3f))Box(modifier=Modifier.size(150.dp).background(Color.Green).align(Alignment.Center).zIndex(2f))}