如何让Jetpack Compose Scaffold获取自定义底部导航栏实际高度？

你的问题核心在于自定义底部导航栏的布局高度没有包含向上突出的中间图标和弧形区域，导致Scaffold计算的底部内边距不足，内容被遮挡。以下是具体修改方案：

关键修改思路 #

1. 统一管理弧形高度参数，避免硬编码
2. 计算底部导航栏的实际总高度：基础高度 + 中间图标向上超出的高度 + 弧形向上延伸的高度（取两者最大值）
3. 调整子元素的摆放位置，确保布局高度包含所有视觉区域

步骤1：修改CustomBottomNavigationLayout，计算完整高度 #

@Composable
fun CustomBottomNavigationLayout(
    modifier: Modifier = Modifier,
    curveHeight: Dp, // 新增：统一传入弧形高度
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->

        val placeables = measurables.map { it.measure(constraints) }

        val gaps = calculateWeightedGap(placeables.map { it.width }, constraints.maxWidth)
        val otherItemsYPos = placeables.minOf { it.height } / 4
        
        // 计算中间图标向上超出的高度（Add按钮）
        val centerItemOverlap = placeables[2].height / 4
        // 转换弧形高度为像素值
        val curveHeightPx = curveHeight.toPx()
        // 取两者最大值，确保覆盖所有向上延伸的区域
        val maxOverlap = max(centerItemOverlap, curveHeightPx).toInt()
        
        // 基础高度 + 向上延伸的最大高度 = 底部导航栏实际总高度
        val baseHeight = placeables.minOf { it.height } + 50
        val totalHeight = baseHeight + maxOverlap

        layout(
            width = constraints.maxWidth,
            height = totalHeight
        ) {
            var xPos = gaps.first()
            placeables.forEachIndexed { index, placeable ->
                // 调整子元素Y坐标，确保在新的布局高度内正确摆放
                val yPos = if (index == 2) {
                    // 中间图标：向上偏移后，顶部对齐布局顶部
                    maxOverlap - centerItemOverlap
                } else {
                    // 其他图标：保持原有相对位置，整体下移maxOverlap
                    maxOverlap + otherItemsYPos
                }
                
                placeable.place(
                    x = if (index == 2) (constraints.maxWidth - placeable.width) / 2 else xPos,
                    y = yPos
                )
                xPos += if (index == 2) placeable.width else placeable.width + gaps[index + 1]
            }
        }
    }
}

步骤2：修改drawBottomBarCurve，接收弧形高度参数 #

fun Modifier.drawBottomBarCurve(
    bottomBarBackgroundColor: Color,
    gradientColors: List<Color>,
    curveHeight: Dp // 新增：统一使用传入的弧形高度
) = drawWithCache {
    val bottomBarWidth = size.width
    val gradient = Brush.horizontalGradient(colors = gradientColors)
    val curveHeightPx = curveHeight.toPx()
    
    val cp1 = Offset(bottomBarWidth * .38f, 0f)
    val cp2 = Offset(bottomBarWidth * .40f, -curveHeightPx)
    val cp3 = Offset(bottomBarWidth * .57f, -curveHeightPx)
    val cp4 = Offset(bottomBarWidth * .61f, 0f)
    
    onDrawBehind {
        val path = Path().apply {
            moveTo(0f, 0f)
            lineTo(bottomBarWidth * .32f, 0f)
            cubicTo(
                x1 = cp1.x,
                y1 = cp1.y,
                x2 = cp2.x,
                y2 = cp2.y,
                x3 = bottomBarWidth / 2,
                y3 = -curveHeightPx
            )
            cubicTo(
                x1 = cp3.x,
                y1 = cp3.y,
                x2 = cp4.x,
                y2 = cp4.y,
                x3 = bottomBarWidth * .68f,
                y3 = 0f
            )
            lineTo(bottomBarWidth, 0f)
        }
        drawPath(path = path, color = bottomBarBackgroundColor)
        drawPath(path = path, brush = gradient, style = Stroke(5f))
    }
}

步骤3：更新CurvedBottomBar调用逻辑 #

@Composable
fun CurvedBottomBar() {
    val bottomBarWidth = getScreenSizeDp().screenWidth
    val curveHeight = 20.dp
    val bottomBarBackgroundColor = Color.Black
    val gradientColors = listOf(Color(0xFF4527A0), Color(0xFF4527A0))
    
    CustomBottomNavigationLayout(
        curveHeight = curveHeight, // 传入弧形高度
        modifier = Modifier
            .background(bottomBarBackgroundColor)
            .drawBottomBarCurve(bottomBarBackgroundColor, gradientColors, curveHeight) // 传递弧形高度参数
    ) {
        // 原有子元素逻辑保持不变
        bottomBarItems.forEachIndexed { index, item ->
            if (index == 2) {
                CustomBottomNavItem(
                    icon = {
                        Icon(
                            imageVector = item.icon,
                            contentDescription = null,
                            tint = Color.White,
                            modifier = Modifier.size(90.dp)
                        )
                    },
                    label = null,
                    selected = true,
                    onClick = {}
                )
            } else {
                CustomBottomNavItem(
                    icon = {
                        Icon(
                            imageVector = item.icon,
                            contentDescription = null,
                            tint = Color.White
                        )
                    },
                    label = item.titleResId,
                    selected = true,
                    onClick = {}
                )
            }
        }
    }
}

修改效果 #

修改后，CustomBottomNavigationLayout的总高度会包含中间图标向上突出的部分和弧形区域，Scaffold能够准确测量底部导航栏的实际高度，生成足够的底部内边距，滚动内容时不会再被遮挡。

内容的提问来源于stack exchange，提问作者Sevban Bayır