Android Compose 中 BottomSheetScaffold 中 TopAppBar 的透明背景

Question

如何使 BottomSheetScaffold 中的 TopAppBar 透明？我希望汉堡图标和应用程序名称覆盖在下面的地图上。使用任何 alpha 值将背景颜色设置为透明不起作用。使用 compose 版本 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)
}

Answer 1

不要将应用栏放在脚手架中。将其放在地图屏幕可组合项之后，并将它们都用 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")
                    }
                }
            )
        }
    }