Compose的Scaffold(八)

一、前言

Compose作为响应式UI框架为UI控件做了充分的解耦，所以在实际开发中几乎每一个控件都可以作为插件放在另外一个控件里面。

另外在Compose中提供了一种脚手架Scaffold的控件帮助开发者快速开发。在Scaffold中提供了很多配件，比如顶部菜单栏、侧滑菜单、底部菜单栏等。并且除了默认的Scaffold外，还有一些类似的控件，比如BackdropScaffold、BottomSheetScaffold等等。不过本篇只做最简单的一个演示

二、Scaffold

在Google的文档中，该类的定义如下(具体释意可看文档)

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: () -> Unit = {},
    bottomBar: () -> Unit = {},
    snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: ColumnScope.() -> Unit = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: (PaddingValues) -> Unit
): @Composable Unit

由此可知都有哪些功能，下面是一个简单的功能，包含了标题栏，侧滑菜单，悬浮按钮等

@Composable
private fun scaffold(){
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = { Text("Drawer content") },
        topBar = {
            TopAppBar(
                title = { Text("Simple Scaffold Screen") },
                navigationIcon = {
                    IconButton(
                        onClick = {
                            scope.launch { scaffoldState.drawerState.open() }
                        }
                    ) {
                        Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                    }
                }
            )
        },
        floatingActionButtonPosition = FabPosition.End,
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Inc") },
                onClick = { /* fab click handler */ }
            )
        },
        content = { innerPadding ->
            LazyColumn(contentPadding = innerPadding) {
                items(count = 100) {
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(colors.background)
                    )
                }
            }
        }
    )
}

三、参考链接

1. Scaffold

   https://developer.android.google.cn/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)

2. Compose的布局教程

   https://developer.android.google.cn/codelabs/jetpack-compose-layouts#0