时间戳

首页 > 解决方案 > 如何在 Jetpack Compose 中为 NavigationDrawer 设置宽度和高度

android - 如何在 Jetpack Compose 中为 NavigationDrawer 设置宽度和高度

问题描述

现在我正在使用Scaffold()可组合来创建一个基本的抽屉布局。然而，抽屉总是相同的大小，但我希望它具有自定义宽度，仅占用屏幕大小的 2/3 和自定义高度，如填充顶部和底部。到目前为止，这是我的代码：

Scaffold(
                    scaffoldState = state,
                    topBar = {
                        TopAppBar(
                            title = {
                                    SearchBar()
                                    },
                            navigationIcon = {
                                IconButton(onClick = {
                                    coroutineScope.launch { state.drawerState.open() }
                                }) {
                                    Icon(Icons.Default.Menu, contentDescription = null)
                                }
                            },
                            backgroundColor = MaterialTheme.colors.background
                        )
                    },
                    drawerShape = RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp),
                    drawerContent = { NavigationDrawer(state, coroutineScope) },
                    content = {
                        MapScreen(
                        )
                    }
                )

更改我的可组合函数中的NavigationDrawer()任何内容都不会改变任何内容。有没有办法在jetpack compose中实现这一点？

标签： androidandroid-layoutkotlinnavigation-drawerandroid-jetpack-compose

解决方案

所以 Drawer 中有一个私有 val，这就是问题所在EndDrawerPadding = 56.dp

在平板电脑上，您需要更多的填充。

由于这无法更改，我能想出的最佳解决方案是使抽屉背景透明且没有阴影，然后在内容中设置一个较小的视图，带有形状和阴影。

     Scaffold(
                topBar = { TopAppBarTablet(){
                    scope.launch { drawerState.open() }
                } },
                drawerBackgroundColor = colorResource(id = R.color.transparent),
                drawerElevation = 0.dp,
                drawerContent = {
                    Surface(
                        Modifier
                            .width(300.dp).fillMaxHeight(),
                        shape = RoundedCornerShape(4.dp),
                        color = colorResource(id = R.color.positive),
                        elevation = 4.dp
                    ) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_home),
                            modifier = Modifier.size(25.dp),
                            contentDescription = null,
                            tint = colorResource(R.color.negative)
                        )
                    }
                }
            )

推荐阅读