Android Jetpack Compose - Snackbar、Box

Snackbar

1、基本介绍

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

2、基本使用

kotlin 复制代码

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
var desc by remember { mutableStateOf("") }

Box(modifier = Modifier.fillMaxSize()) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = {
                scope.launch {
                    val reuslt = 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、基本介绍

kotlin 复制代码

@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

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

2、基本使用

Box 的基本使用

kotlin 复制代码

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

kotlin 复制代码

Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "居中文本",
        modifier = Modifier.align(Alignment.Center)
    )

    Button(
        onClick = { },
        modifier = Modifier.align(Alignment.BottomCenter)
    ) {
        Text("底部按钮")
    }
}

使用 contentAlignment

kotlin 复制代码

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

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

kotlin 复制代码

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

kotlin 复制代码

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

kotlin 复制代码

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

kotlin 复制代码

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、子元素层级

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

kotlin 复制代码

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 值越大，层级越高

kotlin 复制代码

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