Android Compose 中 BottomSheetScaffold 中 TopAppBar 的透明背景答案

【问题标题】：Transparent background for TopAppBar in BottomSheetScaffold in Android ComposeAndroid Compose 中 BottomSheetScaffold 中 TopAppBar 的透明背景
【发布时间】：2021-12-24 07:21:53
【问题描述】：

如何使 BottomSheetScaffold 中的 TopAppBar 透明？我希望汉堡图标和应用程序的名称覆盖在下面的地图上。使用任何 alpha 值将 backgroundColor 设置为透明都不起作用。使用撰写版本 1.0.5。

这是脚手架代码：

BottomSheetScaffold(
    topBar = {
        TopAppBar(
            title = { Text("App") },
            backgroundColor = Color.Transparent.copy(alpha = 0.1f),
            navigationIcon = {
                IconButton(onClick = {
                    scope.launch {
                        bottomSheetScaffoldState.drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }) {
                    Icon(Icons.Default.Menu, "Open/Close menu")
                }
            }
        )
    },
    scaffoldState = bottomSheetScaffoldState,
    drawerGesturesEnabled = false,
    drawerContent = {
        DrawerContent(actions) {
            scope.launch {
                bottomSheetScaffoldState.drawerState.apply {
                    close()
                }
            }
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = {
            },
            backgroundColor = MaterialTheme.colors.secondary,
            modifier = Modifier.padding(bottom = 100.dp),
        ) {
            Icon(Icons.Filled.Add, contentDescription = "Add")
        }
    },
    sheetContent = {
    },
    sheetPeekHeight = 0.dp,
) {
    MapScreen(viewModel = viewModel)
}

【问题讨论】：

标签： android android-jetpack-compose android-jetpack

【解决方案1】：

不要把 appbar 放在脚手架上。把它放在之后你的地图屏幕可组合并用 Box 包装它们。

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        drawerGesturesEnabled = false,
        drawerContent = {
            DrawerContent(actions) {
                scope.launch {
                    bottomSheetScaffoldState.drawerState.apply {
                        close()
                    }
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                },
                backgroundColor = MaterialTheme.colors.secondary,
                modifier = Modifier.padding(bottom = 100.dp),
            ) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        },
        sheetContent = {
        },
        sheetPeekHeight = 0.dp,
    ) {
        Box {
            MapScreen(viewModel = viewModel)
            TopAppBar(
                title = { Text("App") },
                backgroundColor = Color.Transparent.copy(alpha = 0.1f),
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            bottomSheetScaffoldState.drawerState.apply {
                                if (isClosed) open() else close()
                            }
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Open/Close menu")
                    }
                }
            )
        }
    }

【讨论】：

很好，成功了！