Jetpack Compose：Scaffold底部导航栏渐变背景失效问题

问题根源 #

你用绝对数值（startY=0f, endY=50f）定义垂直渐变时，若BottomBar容器的实际高度小于50dp，渐变的整个色彩区间会被压缩，最终只显示纯色。而其他组件（如Box）的高度足够容纳50dp的渐变，所以能正常展示效果。

解决方案 #

方案1：使用相对坐标适配容器高度

将渐变的startY和endY改为相对坐标（0f到1f），这样渐变会自动适配BottomBar容器的实际高度：

val backgroundColor = Brush.verticalGradient(
    colors = listOf(
        Color.Transparent,
        tabColors.backgroundBottom,
    ),
    startY = 0f,   // 对应容器顶部
    endY = 1f,     // 对应容器底部
    tileMode = TileMode.Clamp,
)

方案2：固定渐变高度并确保容器足够高

如果需要固定渐变高度（比如50dp），先将dp转为像素值，同时给容器设置最小高度，保证能容纳整个渐变：

val gradientHeight = 50.dp.toPx()
val backgroundColor = Brush.verticalGradient(
    colors = listOf(
        Color.Transparent,
        tabColors.backgroundBottom,
    ),
    startY = 0f,
    endY = gradientHeight,
    tileMode = TileMode.Clamp,
)

Scaffold(
    bottomBar = {
        if (isTabBarVisible) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .heightIn(min = gradientHeight.toDp()) // 确保容器高度足够
                    .background(backgroundColor)
                    .padding(16.dp)
            ) {
                TabBar(navController = navController)
            }
        }
    }
) { innerPadding ->
    NavHost(
        modifier = Modifier.padding(innerPadding),
        navController = navController,
        startDestination = Screen.SplashData,
    ) {
        ... navigation to screens
    }
}

额外优化：实现内容渐隐效果 #

要让滚动内容在BottomBar处自然渐隐，需确保BottomBar位于内容上层（Scaffold的bottomBar插槽默认就是上层），且渐变的透明区域能透出下方内容。如果你的TabBar本身有不透明背景，需要给TabBar设置透明背景，让Box的渐变背景透出来：

TabBar(
    navController = navController,
    modifier = Modifier.background(Color.Transparent)
)

这样当内容滚动到底部时，会透过BottomBar的渐变透明区域显示，逐渐被纯色部分遮挡，实现你想要的渐隐裁剪效果。

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