在行/列 Jetpack Compose 中创建一个更大的项目

Question

如何创建BottomNavigation，其中一项大于父项，但不使用floatingActionButton。比如这样：

我试图通过用 Box 包裹图标来做到这一点，但它被剪成这样：

然后我尝试分离那个按钮并使用 constraintLayout 来定位它，但是 constraintLayout 像这样覆盖了屏幕。即使我使用 Color.Transparent 给它上色，它总是感觉像 Color.White（我不知道为什么 Color.Transparent 对我不起作用）。在这张图片中，为了清晰起见，我将其设为红色。

那么如何做到这种bottomNavBar而不需要创建heavy-custom-composable呢？

更新：所以我尝试根据MARSK and Dharman comment 制作代码（谢谢btw）。这就是我的

BoxWithConstraints(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .background(Color.Transparent)
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .background(Color.White)
            .align(Alignment.BottomCenter)
    )
    Row(
        modifier = Modifier
            .zIndex(56.dp.value)
            .fillMaxWidth()
            .selectableGroup(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        items.forEach { item ->
            val selected = item == currentSection

            BottomNavigationItem(
                modifier = Modifier
                    .align(Alignment.Bottom)
                    .then(
                        Modifier.height(
                            if (item == HomeSection.SCAN) 84.dp else 56.dp
                        )
                    ),
                selected = selected,
                icon = {
                    if (item == HomeSection.SCAN) {
                        ScanButton(navController = navController, visible = true)
                    } else {
                        ImageBottomBar(
                            icon = if (selected) item.iconOnSelected else item.icon,
                            description = stringResource(id = item.title)
                        )
                    }
                },
                label = {
                    Text(
                        text = stringResource(item.title),
                        color = if (selected) Color(0xFF361DC0) else LocalContentColor.current.copy(
                            alpha = LocalContentAlpha.current
                        ),
                        style = TextStyle(
                            fontFamily = RavierFont,
                            fontWeight = if (selected) FontWeight.Bold else FontWeight.Normal,
                            fontSize = 12.sp,
                            lineHeight = 18.sp,
                        ),
                        maxLines = 1,
                    )
                },
                onClick = {
                    if (item.route != currentRoute && item != HomeSection.SCAN) {
                        navController.navigate(item.route) {
                            launchSingleTop = true
                            restoreState = true
                            popUpTo(findStartDestination(navController.graph).id) {
                                saveState = true
                            }
                        }
                    }
                }
            )
        }
    }
}

它在预览中有效，但在我尝试在应用程序中时无效。 预览中的这个，透明的按预期工作：

这是当我尝试启动它时，透明不起作用：

注意：我将其分配给 Scaffold 的 bottomBar，以便我可以访问导航组件。是不是透明色不起作用的原因？

更新 2：所以使透明的内部 paddingValues 不起作用。我通过手动设置填充底部来修复它：

PaddingValues(
    start = paddingValues.calculateStartPadding(
        layoutDirection = LayoutDirection.Ltr
    ),
    end = paddingValues.calculateEndPadding(
        layoutDirection = LayoutDirection.Ltr
    ),
    top = paddingValues.calculateTopPadding(),
    bottom = SPACE_X7,
)

Answer 1

Custom Composable 并不重，真的。

不管怎样，试试这个：-

创建一个 MaxWidth 的 Container（可能是 BoxWithConstraints 之类的），保持其背景透明，设置高度以包裹内容。像往常一样创建选项卡，但使用 Modifier.size(Bigger Size) 显式保持较大选项卡的图标大小。

完成此设置后，在此容器内添加另一个具有白色背景的容器，覆盖原始容器的特定高度。假设 60%

现在将所有图标和选项卡的 z-index 设置为高于这个最后添加的容器的 z-index。为此使用 Modifier.zIndex。还有 viola，你的 Composable 准备好了。

为了设置内部容器的特定百分比高度，您需要访问原始容器的高度。为此使用 BoxWithConstraints，或者只实现一个简单的自定义 Layout Composable