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))}