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

Question

现在我正在使用 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 中实现这一点？

Answer 1

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

Answer 2

你可以添加这样的东西。

@Composable
fun ScaffoldWithPanel() {
    Scaffold(
        topBar = { ... },
        bottomBar = { ... },
        bodyContent = {
            WithConstraints {
                val parentWidth = with(AmbientDensity.current) {
                    constraints.maxWidth.toDp()
                }
                val parentHeight = with(AmbientDensity.current) {
                    constraints.maxHeight.toDp() 
                }
                Box {
                    MainContent()
                    if(drawerState.value != DrawerValue.Open) {
                        Box(modifier = Modifier.size(parentWidth / 2, height = parentHeight)) {
                            SidePanel()   
                        }
                    }
                }
            }
        }
    )
}

欲了解更多详情，请访问此网站： https://amryousef.me/side-drawer-jetpack-compose