Android Jetpack Compose - Snackbar、Box

Snackbar

1、基本介绍

1. Snackbar 是一种轻量级反馈机制，它用于提供有关操作或动作的反馈

2. 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)

2、基本使用

1. 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("底部按钮")}}

2. 使用 contentAlignment

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

3. 子元素使用 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

1. 外部灰色 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)))}

2. 外部灰色 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)))}

3. 外部灰色 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、子元素层级

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

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

2. 可以使用 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))}