如何使 BottomAppBar 的浮动操作按钮透明？

Question

我正在 Android 应用程序中开发 Jetpack Compose。所以我想用BottomAppBar和透明的cutoutShape。从来没有找到任何例子，有人可以帮忙吗？

我想让 FAB 周围的白色背景透明。

实际结果（不是预期的）： A BottomAppBar without a transparent cutoutShape

我使用的代码：

val fabShape = RoundedCornerShape(50)
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    navController.navigate(Routes.signUp)
                },
                shape = fabShape,
                backgroundColor = Color(0xFFFF8C00)
            ) {
                Icon(Icons.Filled.Add, "")
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,

        bottomBar = {
            BottomAppBar(
                cutoutShape = fabShape,
                content = {
                    BottomNavigation {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentDestination = navBackStackEntry?.destination
                        items.forEachIndexed { index, screen ->
                                BottomNavigationItem(
                                   ...
                                )
                        }
                    }
                }
            )
        }
    ) { innerPadding ->
        internalView(innerPadding)
    }

Answer 1

如果您想让内容在 bottomAppBar 后面滚动，只需删除 Scaffold 传递给 content 的 innerPadding:

不申请 innerPadding:

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)

正在应用innerPadding：

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)

如何使 BottomAppBar 的浮动操作按钮透明？

How to make the Floating Action Button of a BottomAppBar transparent?

android

android-jetpack

android-jetpack-compose