系列文章目录

• Android~Compose初探
• Android~Compose之自定义View
• Android~Compose相关概念总结
• Android~Compose脚手架和Toast
• Android~Compose路由Navigation和传参

---

---

目标

• 熟悉Compose中脚手架使用
• 自定义Toast样式

脚手架

我们知道脚手架包含标题栏、底部栏、SnackBar、浮动按钮、抽屉、内容等部分。

@Composable
fun ScaffoldPage() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = { //抽屉组件
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "抽屉组件中内容")
            }
        },
        topBar = { //屏幕顶部的标题栏
            TopAppBar(title = { Text("脚手架") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch { scaffoldState.drawerState.open() }
                    }) {
                        Icon(Icons.Filled.Menu, contentDescription = null)
                    }
                })
        },
        floatingActionButton = { //悬浮按钮
            Column {
                ExtendedFloatingActionButton(
                    text = { Text("Toast") },
                    onClick = {
                        scope.launch {
                            scaffoldState.snackbarHostState.showSnackbar(
                                "这是一个Toast",
                                duration = SnackbarDuration.Short
                            )
                        }
                    })
                ExtendedFloatingActionButton(
                    text = { Text("SnackBar") },
                    onClick = {
                        scope.launch {
                            scaffoldState.snackbarHostState.showSnackbar(
                                "这是一个SnackBar",
                                "按钮",
                                SnackbarDuration.Short
                            )
                        }
                    })
            }
        },
        floatingActionButtonPosition = FabPosition.End, //悬浮按钮在屏幕中的位置
        content = {
            //屏幕内容
            val paddingValues = it.calculateBottomPadding()
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "屏幕内容区域")
            }
        },
        snackbarHost = {
            SnackbarHost(it) { data ->
                Snackbar(
                    snackbarData = data,
                    backgroundColor = Color.Blue,
                    contentColor = Color.White,
                    shape = RoundedCornerShape(10.dp)
                )
            }
        }
    )
}

基于Snackbar自定义Toast

Compose中无专用Toast，可以简单是通过Snackbar封装实现效果。Snackbar是安卓5.0 Material Design提供的一个新控件，只需要将脚手架中Snackbar替换为下面的代码即可。

Box(
    modifier = Modifier
        .wrapContentHeight()
        .fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    Snackbar(
        modifier = Modifier
            .wrapContentHeight()
            .width(200.dp)
    ) {
        Row(
            Modifier
                .wrapContentHeight()
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "",
                tint = Color.White
            )
            Text(
                text = data.message,
                modifier = Modifier.padding(start = 10.dp),
                style = TextStyle(color = Color.White, fontSize = 20.sp)
            )
        }
    }
}

实现效果

可以看到这种方案还是有点缺陷的，比如不好处理宽度、不支持动态设置吐司显示位置。