Compose中Scaffold的BottomBar裁剪后残留白色背景求助

问题描述 #

在Jetpack Compose中对Scaffold的BottomBar做自定义裁剪后，底部始终有无法去除的白色背景。

相关代码 #

@Composable
fun HomePage(
    mainActions: MainActions,
    homeViewModel: HomeViewModel = viewModel(),
) {
    val navCtrl = rememberNavController()
    Scaffold(
        Modifier.navigationBarsPadding(),
        backgroundColor = Color.Red,
        bottomBar = {
            BottomNavigation(homeViewModel,
                onTapBottom = {
                    navigatorTo(navCtrl, it)
                })
        }) { innerPadding ->
        NavHost(
            navCtrl,
            startDestination = NavigationRoute.homeRoute,
            Modifier.padding(innerPadding)
        ) {
            composable(NavigationRoute.homeRoute) {
                OneFragment()
            }
            composable(NavigationRoute.widgetRoute) {
                val vieModel: MessageViewModel = viewModel()
                TwoFragment(mainActions, vieModel)
            }
            composable(NavigationRoute.settingRoute) {
                ThreeFragment(mainActions)
            }
        }
    }
}


//自定义裁剪部分
//背景动画
@Composable
private fun BottomBarAnimalBgView(indexValue: Float) {
    Canvas(modifier = Modifier
        .fillMaxWidth()
        .height(70.dp), onDraw = {
        drawIntoCanvas { canvas ->
            val paint = Paint()
            paint.color = Color(0xFF108888)//Color(0XFF0DBEBF)
            paint.style = PaintingStyle.Fill
            //先固定分为三等分
            val widthOfOne = size.width / 3
            //每一个弧度的中心控制点
            val centerWidthOfOneX = widthOfOne / 2
            //弧度端口到两边ONewidth距离
            val marginLeftAndRight = centerWidthOfOneX / 1.6f

                val controllerX = centerWidthOfOneX / 6f

                val keyAnimal = widthOfOne * indexValue
                canvas.save()
                paint.asFrameworkPaint().setShadowLayer(
                    15f,
                    5f,
                    -6f,
                    Color(0xFF108888).toArgb()
                )
                canvas.drawCircle(Offset(centerWidthOfOneX + keyAnimal, 0f), 60f, paint)

            val path = Path().apply {
                moveTo(0f, 0f)
                lineTo(marginLeftAndRight / 2 + keyAnimal, 0f)
                cubicTo(
                    marginLeftAndRight + keyAnimal,
                    0f,
                    centerWidthOfOneX - (centerWidthOfOneX - controllerX) / 2f + keyAnimal,
                    size.height / 3f,
                    centerWidthOfOneX + keyAnimal,
                    size.height / 2.6f
                )
                cubicTo(
                    centerWidthOfOneX + (centerWidthOfOneX - controllerX) / 2f + keyAnimal,
                    size.height / 2.6f,
                    widthOfOne - (marginLeftAndRight) + keyAnimal,
                    0f,
                    widthOfOne - marginLeftAndRight / 2 + keyAnimal,
                    0f
                )
                lineTo(size.width, 0f)
                lineTo(size.width, size.height)
                lineTo(0f, size.height)
                close()
            }

            canvas.drawPath(path, paint)

            //裁剪
            val clipPath = Path().apply {
            moveTo(0f, 0f)
            lineTo(marginLeftAndRight / 2 + keyAnimal, 0f)
            cubicTo(
                marginLeftAndRight + keyAnimal,
                0f,
                centerWidthOfOneX - (centerWidthOfOneX - controllerX) / 2f + keyAnimal,
                size.height / 3f,
                centerWidthOfOneX + keyAnimal,
                size.height / 2.6f
            )
            cubicTo(
                centerWidthOfOneX + (centerWidthOfOneX - controllerX) / 2f + keyAnimal,
                size.height / 2.6f,
                widthOfOne - (marginLeftAndRight) + keyAnimal,
                0f,
                widthOfOne - marginLeftAndRight / 2 + keyAnimal,
                0f
            )
            lineTo(size.width, 0f)
            close()
            }
            canvas.clipPath(clipPath,ClipOp.Difference)
        }
    })
}

问题分析 #

• 相同裁剪逻辑在Flutter中可正常移除背景
• 不使用Scaffold时BottomBar显示正常，推测白色背景来自Scaffold底部导航栏的默认背景色

解决方案 #

核心是覆盖BottomNavigation的默认白色背景：

1. 如果使用官方BottomNavigation组件，直接给它设置backgroundColor = Color.Transparent
2. 若为自定义封装的BottomNavigation，在其根布局添加透明背景参数
3. 也可以给BottomBarAnimalBgView的Modifier追加background(Color.Transparent)，确保Canvas底层无默认背景

示例修改（针对官方BottomNavigation）：

BottomNavigation(
    backgroundColor = Color.Transparent, // 添加该行覆盖默认背景
    homeViewModel,
    onTapBottom = {
        navigatorTo(navCtrl, it)
    }
)

内容的提问来源于stack exchange，提问作者fei wang