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

问题描述

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

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

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

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

更新：所以我尝试根据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
                            }
                        }
                    }
                }
            )
        }
    }
}

它可以在预览中使用，但是当我在应用程序中尝试时不起作用。预览中的这个，透明的按预期工作：

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

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

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

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

标签： androidkotlinandroid-jetpack-compose

自定义 Composable 并不重，真的。

无论如何，试试这个： -

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

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

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

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

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

问题描述

解决方案

推荐阅读