在Android Compose的BottomSheetScaffold中为TopAppBar设置透明背景

Question

如何让BottomSheetScaffold中的TopAppBar透明？我希望汉堡图标和应用程序名称覆盖在地图上方。设置backgroundColor为透明并不起作用，无论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)
}

- rysv

Answer 1

不要把应用栏放在脚手架中，而是将它放在地图屏幕组合后面，并用一个框将它们两个包起来。

    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")
                    }
                }
            )
        }
    }

- uragiristereo

---

太棒了，它起作用了！ - rysv

Answer 2

你也可以使用其他方法而不是使用 box。

只需使用透明背景的 Scaffold，并使用自定义的应用栏，而不是 TopAppBar。

BottomSheetScaffold(
    topBar = { YourCustomizedAppBarComposable()},
    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,
    background = Color.Transparent
) {
    MapScreen(viewModel = viewModel)
}

- SW Choi