Как разместить текст под значком в нижней навигации в скаффолде

Я пытаюсь создать приложение с помощью 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()
    }
}

//Класс данных

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

1
0
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

есть атрибут метка, поэтому вы можете сделать это:

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

Другие вопросы по теме

Коробка против стека в MUI
Как использовать кликер даты пользовательского интерфейса материала на обычном элементе CSS?
Невозможно отобразить svg в пользовательском интерфейсе материалов
Как я могу исправить высоту в MaterialUI?
Ящик MUI не отображается с помощью React-router-dom v6
Используете ли вы/ваша компания React Material-ui? Почему или почему нет?
Настройка загрузки, когда пользователь все еще находится в системе, не работает
Как правильно ввести тему, переданную в качестве реквизита методу styled() в пользовательском интерфейсе материалов? (Машинопись)
Как стилизовать компонент выбора материала-интерфейса с компонентами стиля (а не с классами материала-интерфейса!) В реакции?
Как передать setState в другую функцию и использовать его для целевого значения из выбора материала-интерфейса и обработки изменения, ошибка «значение не определено»