Compose自定义形状Bottom Nav Bar：内容穿透显示问题求助

问题描述 #

• 需实现顶部带半圆缺口的自定义Bottom Nav Bar，已通过自定义形状裁剪完成导航栏样式
• 将导航栏传入Scaffold的bottomBar参数时，系统会为导航栏预留独立区域，导致列表滚动至此处时被直线截断，无法从半圆缺口处显示内容
• 若将导航栏放在Scaffold的content层叠布局中，虽能实现内容穿透，但导航栏不纳入系统内边距计算，每个页面都需手动添加底部间距，否则内容会被遮挡

当前临时实现代码 #

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = topBar,
    // bottomBar = bottomBar, // 此处传入会出现内容截断问题
    content = { paddingValues ->
        Box(Modifier.padding(paddingValues)) {
            content(paddingValues)
            BottomNavigationBar(Modifier.align(Alignment.BottomCenter), navController)
        }
    }
)

解决方案 #

要在使用bottomBar参数的同时实现内容穿透，核心是让Scaffold的content区域延伸至导航栏的镂空部分，同时正确处理内边距：

1. 自定义导航栏的形状与背景 #

确保导航栏通过clip应用自定义形状，且整体背景透明，仅在非镂空区域设置背景：

@Composable
fun BottomNavigationBar(modifier: Modifier = Modifier, navController: NavController) {
    BottomNavigation(
        modifier = modifier
            .clip(CustomBottomNavShape()) // 你的自定义异形
            .height(64.dp),
        backgroundColor = Color.Transparent // 整体透明，非镂空区域在子项中设置背景
    ) {
        // 导航项，仅在非半圆区域设置背景色
        NavItem(icon = { Icon(...) }, label = { Text(...) })
        // 其他导航项...
    }
}

2. 调整Scaffold的内容内边距 #

默认Scaffold会给content添加导航栏高度的内边距，我们需要减去半圆缺口的高度，让内容能延伸到镂空区域：

val navBarHeight = 64.dp
val notchHeight = 20.dp // 半圆缺口的高度，根据你的自定义形状调整

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = topBar,
    bottomBar = {
        BottomNavigationBar(navController = navController)
    },
    content = { originalPadding ->
        // 调整底部内边距：原内边距减去缺口高度，让内容延伸至镂空区域
        val adjustedPadding = originalPadding.copy(
            bottom = originalPadding.bottom - notchHeight
        )
        Box(Modifier.padding(adjustedPadding)) {
            // 你的内容组件，比如LazyColumn
            LazyColumn {
                items(100) { index ->
                    Text("列表项 $index", modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
)

3. 适配系统导航栏（可选） #

如果需要适配底部系统导航栏，结合WindowInsets处理内边距：

val systemInsets = WindowInsets.systemBars.asPaddingValues()
val adjustedBottomPadding = systemInsets.bottom + (navBarHeight - notchHeight)

// 在Scaffold或content中使用调整后的内边距

通过以上步骤，既能通过bottomBar参数传入导航栏，实现系统内边距的自动计算，又能让内容透过半圆缺口自然显示，无需手动给每个页面添加底部间距。

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