Android Jetpack Compose Material3底部导航栏圆角阴影顶部边框问题

你看到的顶部细边框是Material3 NavigationBar默认自带的顶部分割线，不是Scaffold的边框。直接按以下方式修改代码即可解决：

修改方案 #

核心是关闭默认分割线，同时优化阴影和圆角的实现逻辑：

var selectedItemIndex by rememberSaveable {
    mutableStateOf(0)
}
Scaffold(
    containerColor = Color.Transparent,
    modifier = Modifier.fillMaxSize(),
    bottomBar = {
        // 用Box包裹NavigationBar，将阴影加在外部容器上，避免和组件自身样式冲突
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .shadow(
                    elevation = 3.dp,
                    shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
                )
        ) {
            NavigationBar(
                containerColor = Color.DarkGray,
                // 关闭默认色调提升效果，避免额外视觉叠加
                tonalElevation = 0.dp,
                // 关键：将顶部默认分割线设为透明
                colors = NavigationBarDefaults.colors(
                    dividerColor = Color.Transparent
                )
            ) {
                BottomNavigationForEachItem.forEachIndexed { index, bottomNavItem ->
                    NavigationBarItem(
                        modifier = Modifier.padding(vertical = 5.dp),
                        selected = selectedItemIndex == index,
                        onClick = {
                            selectedItemIndex = index
                            navController.navigate(bottomNavItem.route)
                        },
                        icon = {
                            Icon(
                                modifier = Modifier.size(32.dp),
                                imageVector = if (selectedItemIndex == index) {
                                    bottomNavItem.selectedIcon
                                } else bottomNavItem.unSelectedIcon,
                                contentDescription = bottomNavItem.label
                            )
                        }
                    )
                }
            }
        }
    }
) { innerPadding ->
    NavHost(
        navController = navController,
        startDestination = startDestination.route,
        modifier = Modifier.padding(innerPadding)
    ) {
        // 你的页面路由代码保持不变
        composable(ScreenNav.Auth.route) { AuthScreen(navController) }
        composable(ScreenNav.Login.route) { SignInScreen(navController) }
        composable(ScreenNav.Home.route) {
            val viewModel = hiltViewModel<HomeViewModel>()
            val tala = viewModel.talaPagingFlow.collectAsLazyPagingItems()
            val itemMeta = viewModel.itemMetaPagingFlow.collectAsLazyPagingItems()
            val itemMetaMap by viewModel.itemMetaMap.collectAsState()

            HomeScreen(
                tala = tala,
                itemMeta = itemMeta,
                onFetchItemMeta = { itemId -> viewModel.getItemMeta(itemId) },
                itemMetaMap = itemMetaMap
            )
        }
        composable(ScreenNav.Saved.route) { SavedScreen() }
        composable(ScreenNav.Profile.route) { ProfileScreen() }
    }
}

改动说明 #

1. 移除顶部细边框：通过NavigationBarDefaults.colors(dividerColor = Color.Transparent)直接关闭NavigationBar默认的顶部分割线，这就是你看到的细边框来源。
2. 优化阴影效果：将阴影添加在外部Box容器上，而非NavigationBar自身的Modifier，这样阴影会完全贴合圆角形状，不会被组件内部布局截断，效果更接近目标样式。
3. 关闭默认色调提升：设置tonalElevation = 0.dp，避免Material3默认的色调渐变效果，确保导航栏背景色完全为你设置的Color.DarkGray。

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