如何将文本放在脚手架底部导航中的图标下

Question

我正在尝试使用 Jetpack Compose 创建一个应用程序，但我不知道如何将文本放在导航栏的底部

这是它的样子

我想要的：

脚手架

@Composable
fun StandardScaffold(
    navController: NavController,
    modifier: Modifier = Modifier,
    showBottomBar: Boolean = true,
    showToolbar: Boolean = true,
    alwaysShowLabel: Boolean = true,
    toolbarTitle: String? = null,
    showBackArrow: Boolean = true,
    navActions: @Composable RowScope.() -> Unit = {},
    bottomNavItems: List<BottomNavItem> = listOf(
        BottomNavItem(
            label = "Home",
            route = Screen.WorkScreen.route,
            icon = painterResource(id = R.drawable.ic_write_vector),
            contentDescription = stringResource(id = R.string.write),
        ),
       ),
    content: @Composable () -> Unit
) {
    Scaffold(
        bottomBar = {
            if (showBottomBar)
                BottomNavigation(
                    backgroundColor = MaterialTheme.colors.background,
                ) {
                    bottomNavItems.forEach { bottomNavItem ->
                        StandardBottomNavItem(
                            icon = bottomNavItem.icon,
                            contentDescription = bottomNavItem.contentDescription,
                            selected = bottomNavItem.route == navController.currentDestination?.route,
                            alertCount = bottomNavItem.alertCount,
                            enabled = bottomNavItem.icon != null,
                            label = bottomNavItem.label,
                        ) {
                            if (navController.currentDestination?.route != bottomNavItem.route) {
                                navController.navigate(bottomNavItem.route)
                            }
                        }
                    }

                }
            Divider(color = Color(0xFF232323), thickness = 1.dp)
        },
        modifier = modifier
    ) {
        content()
    }
}

//数据Class

data class BottomNavItem(
        val route: String,
        val icon: Painter? = null,
        val contentDescription: String? = null,
        val alertCount: Int? = null,
        val label: String? = null,
)

通知气泡

@Composable
@Throws(IllegalArgumentException::class)
fun RowScope.StandardBottomNavItem(
    modifier: Modifier = Modifier,
    icon: Painter? = null,
    contentDescription: String? = null,
    selected: Boolean = false,
    alertCount: Int? = null,
    label:String? = null,
    selectedColor: Color = MaterialTheme.colors.primary,
    unselected: Color = IconUnselected,
    enabled: Boolean = true,
    onClick: () -> Unit
    ) {
       if (alertCount != null && alertCount < 0) {
           throw IllegalArgumentException("Alert count can't be negative")
        }
        BottomNavigationItem(
            selected = selected,
            onClick = onClick,
            modifier = modifier,
            enabled = enabled,
            selectedContentColor = selectedColor,
            unselectedContentColor = unselected,
            icon = {
                Box(
                    modifier = Modifier.fillMaxSize()
                ) {
                    if(icon != null) {
                        Icon(
                            painter = icon,
                            contentDescription = contentDescription,
                            modifier = Modifier
                                .align(Alignment.Center),
                        )
                    }
                    if (alertCount != null) {
                        val alertText = if (alertCount > 99) {
                            "99+"
                        } else {
                            alertCount.toString()
                        }
                        Text(
                            text = alertText,
                            color = MaterialTheme.colors.onPrimary,
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center,
                            fontSize = 10.sp,
                            modifier = Modifier
                                .align(Alignment.TopCenter)
                                .offset(10.dp)
                                .size(15.dp)
                                .clip(CircleShape)
                                .background(MaterialTheme.colors.primary)
                        )
                    }
    
                }
    
            }
        )
    }

Answer 1

@Composable
fun RowScope!.BottomNavigationItem(
    selected: Boolean!,
    onClick: (() -> Unit)?,
    icon: (@Composable () -> Unit)?,
    modifier: Modifier! = Modifier,
    enabled: Boolean! = true,
    label: (@Composable () -> Unit)? = null,
    alwaysShowLabel: Boolean! = true,
    interactionSource: MutableInteractionSource! = remember { MutableInteractionSource() },
    selectedContentColor: Color! = LocalContentColor.current,
    unselectedContentColor: Color! = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit

有一个 label 属性，因此您可以这样做：

BottomNavigationItem(
    icon = { Icon(painter = painterResource(icon), contentDescription = null) },
    label = { Text(label) },
    selected = selected,
    alwaysShowLabel = false, //label will only show when selected if it's false
    onClick = {
        // do navigating here
    }
)

顺便说一句，你似乎想给 NavItem 添加徽章，我只想告诉你有一个 Badge

BottomNavigation {
    BottomNavigationItem(
        icon = {
            BadgedBox(badge = { Badge { Text("8") } }) {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Favorite"
                )
            }
        },
        selected = false,
        onClick = {}
    )
}

如何将文本放在脚手架底部导航中的图标下

How to put text under a icon in bottom navigation in scaffold

android

material-ui

android-jetpack-compose