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

Question

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

我试着用盒子包裹图标，但它被切割成这样：

然后我尝试分离这个按钮并使用constraintLayout来定位它，但是constraintLayout像这样覆盖了屏幕。甚至当我用颜色给它上色的时候。透明，感觉就像颜色。白色（我不知道为什么颜色。透明对我来说永远不合适）。在这张照片中，为了清晰起见，我给它涂上了红色。

那么如何在不创建重度自定义可组合的情况下完成这种底部NavBar呢？

更新：所以我尝试基于MARSK和Dharman注释制作代码（顺便说一句，谢谢）。这就是我

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
                            }
                        }
                    }
                }
            )
        }
    }
}

它在预览版中可以工作，但当我在应用程序中尝试时却无法工作。这一个在预览中，透明的工作如预期:

当我试着启动它时，透明的东西不起作用了:

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

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

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

Answer 1

定制的可组合家具真的不重。

不管怎样，试试这个：-

创建一个 MaxWidth 容器（可能是 BoxWithConstraints 或其他），保持其背景透明，设置包装内容的高度。像往常一样创建选项卡，但使用 Modifier.size（较大大小）显式地保持较大选项卡的图标大小。

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

现在，将所有图标和选项卡的z索引设置为高于最后添加的容器的z索引。为此使用Modifier.zIndex。维奥拉，你已经准备好了你的曲子。

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