Jetpack Compose 中 TopAppBar 下方的導航抽屜

Question

• 我正在使用Jetpack Compose開發一個包含多個屏幕的應用程序，我們可以使用Navigation Drawer導航到它們。
• 如何將導航抽屜放在TopAppBar （ or Toolbar ）下方。 以下是該問題的 gif：

下面是我的屏幕的可組合 function：

fun Home(navController: NavHostController) {
    
        val scaffoldState = rememberScaffoldState()
        val coroutineScope = rememberCoroutineScope()
    
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            buildAnnotatedString {
                                append("Hello World")
                                pushStyle(SpanStyle(fontWeight = FontWeight.Medium, fontSize = 12.sp))
                                append("\nhelloworld@gmail.com")
                                pushStyle(SpanStyle(fontWeight = FontWeight.Light, fontSize = 10.sp))
                            }
                        )
                    },
                    navigationIcon = {
                        IconButton(onClick = {
                            coroutineScope.launch {
                                scaffoldState.drawerState.open()
                            }
                        }) {
                            Icon(
                                imageVector = Icons.Outlined.Menu,
                                contentDescription = null
                            )
                        }
                    }
                )
            },
            drawerContent = {},
            scaffoldState = scaffoldState,
            drawerContentColor = MaterialTheme.colors.onBackground,
            content = {
                HomeScreenContent(scaffoldState, navController)
            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    text = { Text(text = "Compose") },
                    onClick = { navController.navigate("CreateMsg") },
                    modifier = Modifier.padding(0.dp),
                    icon = {
                        Icon(
                            imageVector = Icons.Outlined.Create,
                            contentDescription = null,
                            tint = Color.White,
                        )
                    },
                    shape = CircleShape,
                    backgroundColor = MaterialTheme.colors.primary
                )
            }
        )
    }

Answer 1

如果你想在你的 TopAppbar 下把 TopAppbar 和 Scaffold 放在一列中

Column(modifier=Modifier.fillMaxSize()){
  TopAppbar()
  Scaffold()
}

如果您希望 TopAppbar 下方的 NavigationDrawer 將它們放入 Box 中

Box(modifier=Modifier.fillMaxSize()){
  Scaffold()
  TopAppbar()

}

並讓您的 HomeContent topPadding 與您的 TopAAppbar 的高度一樣大。

第一

@Composable
private fun MyComposable() {
    val scaffoldState = rememberScaffoldState()

    Column(modifier = Modifier.fillMaxSize()) {

        val coroutineScope = rememberCoroutineScope()

        TopAppBar(
            modifier = Modifier.fillMaxWidth(),
            title = {
                Text(
                    buildAnnotatedString {
                        append("Hello World")
                        pushStyle(SpanStyle(fontWeight = FontWeight.Medium, fontSize = 12.sp))
                        append("\nhelloworld@gmail.com")
                        pushStyle(SpanStyle(fontWeight = FontWeight.Light, fontSize = 10.sp))
                    }
                )
            },
            navigationIcon = {
                IconButton(onClick = {
                    coroutineScope.launch {
                        scaffoldState.drawerState.open()
                    }
                }) {
                    Icon(
                        imageVector = Icons.Outlined.Menu,
                        contentDescription = null
                    )
                }
            }
        )

        Scaffold(
            modifier = Modifier
                .fillMaxSize(),
            drawerContent = {},
            scaffoldState = scaffoldState,
            drawerContentColor = MaterialTheme.colors.onBackground,
            content = {
                HomeScreenContent(scaffoldState)
            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    text = { Text(text = "Compose") },
                    onClick = { },
                    modifier = Modifier.padding(0.dp),
                    icon = {
                        Icon(
                            imageVector = Icons.Outlined.Create,
                            contentDescription = null,
                            tint = Color.White,
                        )
                    },
                    shape = CircleShape,
                    backgroundColor = MaterialTheme.colors.primary
                )
            }
        )
    }
}

@Composable
fun HomeScreenContent(scaffoldState: ScaffoldState) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {

        Text("HOME CONTENT", fontSize = 30.sp, color = Color.White)
    }
}

第二個

@Composable
private fun MyComposable() {
    val scaffoldState = rememberScaffoldState()

    Box(modifier = Modifier.fillMaxSize()) {

        val coroutineScope = rememberCoroutineScope()
        Scaffold(
            modifier = Modifier
                .fillMaxSize(),
            drawerContent = {},
            scaffoldState = scaffoldState,
            drawerContentColor = MaterialTheme.colors.onBackground,
            content = {
                HomeScreenContent(scaffoldState, 56.dp)
            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    text = { Text(text = "Compose") },
                    onClick = { },
                    modifier = Modifier.padding(0.dp),
                    icon = {
                        Icon(
                            imageVector = Icons.Outlined.Create,
                            contentDescription = null,
                            tint = Color.White,
                        )
                    },
                    shape = CircleShape,
                    backgroundColor = MaterialTheme.colors.primary
                )
            }
        )

        TopAppBar(
            modifier = Modifier.fillMaxWidth(),
            title = {
                Text(
                    buildAnnotatedString {
                        append("Hello World")
                        pushStyle(SpanStyle(fontWeight = FontWeight.Medium, fontSize = 12.sp))
                        append("\nhelloworld@gmail.com")
                        pushStyle(SpanStyle(fontWeight = FontWeight.Light, fontSize = 10.sp))
                    }
                )
            },
            navigationIcon = {
                IconButton(onClick = {
                    coroutineScope.launch {
                        scaffoldState.drawerState.open()
                    }
                }) {
                    Icon(
                        imageVector = Icons.Outlined.Menu,
                        contentDescription = null
                    )
                }
            }
        )

    }
}

@Composable
fun HomeScreenContent(scaffoldState: ScaffoldState, topPadding:Dp) {
    Column(
        modifier = Modifier
            .padding(top= topPadding)
            .fillMaxSize()
            .background(Color.Red)
    ) {

        Text("HOME CONTENT", fontSize = 30.sp, color = Color.White)
    }
}

56.dp 是我設備上TopAppBar的默認大小。 如果您有自定義高度，則需要通過設置為TopAppBar的 Modifier.onSizeChanged{} 修飾符來獲取它。