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

【问题标题】：How to make the Floating Action Button of a BottomAppBar transparent?如何使 BottomAppBar 的浮动操作按钮透明？
【发布时间】：2021-07-27 19:22:21
【问题描述】：

我正在 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)
    }

【问题讨论】：

欢迎来到 Stack Overflow！您提供的图像中的切口似乎不透明，但似乎是白色的？这是你的意思吗？
嗨！图像是我的实际结果，而不是预期的。但是，是的，FAB 周围的白色部分最后应该是透明的。
啊，我明白了！如果您可以包含minimal reproducible example，将会很有用。这种行为不是故意的，它应该是自然“透明”的，因为你需要它。
我只是编辑我的帖子，所以你可以看到我使用的代码。
谢谢！但是，是的，这很合乎逻辑，谢谢加布里埃尔。您可以做出答案，以便它使您获得更多积分！ ☺️

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

【解决方案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),"")
        }

    }
)

【讨论】：