Android Compose 中 BottomSheetScaffold 中 TopAppBar 的透明背景

Question

如何使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)
}

Answer 1

不要将应用栏放在脚手架中。将它放在 AFTER 你的地图屏幕可组合项上，然后用 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")
                    }
                }
            )
        }
    }

Android Compose 中 BottomSheetScaffold 中 TopAppBar 的透明背景

Transparent background for TopAppBar in BottomSheetScaffold in Android Compose

android

android-jetpack

android-jetpack-compose