Android Compose BottomNavigation设置End位置扩展FAB时菜单项被遮挡如何解决

问题根因 #

当FabPosition.End配合isFloatingActionButtonDocked = true使用时，BottomAppBar会在右侧预留FAB的凹槽位置，而默认的BottomNavigation会填充BottomAppBar的全部可用宽度，导致右侧的导航项刚好落在FAB的重叠区域被遮挡。

可行实现方案 #

方案1：给BottomNavigation添加右侧内边距（改造成本最低） #

根据你的扩展FAB的实际宽度，给BottomNavigation添加右侧padding，预留出FAB的占用空间即可，你当前的扩展FAB宽度大概在180-200dp左右，可根据实际显示效果调整数值，修改后bottomBar部分代码如下：

bottomBar = {
    BottomAppBar(
        cutoutShape = RoundedCornerShape(50),
        content = {
            BottomNavigation(
                // 新增此行配置，右侧预留FAB空间
                modifier = Modifier.padding(end = 200.dp)
            ) {
                BottomNavigationItem(
                    selected = selectedItem.value == "send",
                    onClick = {
                        content.value = "Send Screen"
                        selectedItem.value = "send"
                    },
                    icon = {
                        Icon(Icons.Filled.SwapVert, contentDescription = "send")
                    },
                    label = { Text(text = "send") },
                    alwaysShowLabel = false
                )

                BottomNavigationItem(
                    selected = selectedItem.value == "input",
                    onClick = {
                        content.value = "input Screen"
                        selectedItem.value = "input"
                    },
                    icon = {
                        Icon(Icons.Filled.Create, contentDescription = "input")
                    },
                    label = { Text(text = "Input") },
                    alwaysShowLabel = false
                )
            }
        }
    )
}

方案2：添加占位元素适配动态宽度 #

如果你的FAB宽度会随业务动态调整，不想写死padding值，可以在两个导航项之后添加一个和FAB宽度一致的占位Box，让两个导航项自动平分左侧可用空间，核心修改代码如下：

BottomNavigation {
    // 原有send导航项代码不变
    BottomNavigationItem(/* 原有配置 */)
    // 原有input导航项代码不变
    BottomNavigationItem(/* 原有配置 */)
    // 新增占位Box，宽度和你的FAB宽度保持一致即可
    Box(modifier = Modifier.width(200.dp))
}

可选优化方案 #

如果不需要FAB嵌入底部栏的效果，可直接将isFloatingActionButtonDocked设为false，此时BottomAppBar不会预留凹槽，只需调整BottomNavigation的高度避免被悬浮的FAB遮挡即可。

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