BottomNavigationItems 填充

Question

有什么方法可以从 BottomNavigationItem 中删除此填充吗？

图像

如果我有非常大的文本，我必须使用 ResponsiveText 来管理它，但这不是我的意图。我需要的是它的左侧和右侧都没有侧边距/边距，以便占据尽可能多的空间。

我的代码：

@Composable
fun BottomNavBar(
    backStackEntryState: State<NavBackStackEntry?>,
    navController: NavController,
    bottomNavItems: List<NavigationItem>
) {
    BottomNavigation(
        backgroundColor = DarkGray.copy(alpha = 0.6f),
        elevation = Dimen0,
        modifier = Modifier
            .padding(Dimen10, Dimen20, Dimen10, Dimen20)
            .clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13))
    ) {
        bottomNavItems.forEach { item ->
            val isSelected = item.route == backStackEntryState.value?.destination?.route

            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.icon.orZero()),
                        contentDescription = stringResource(id = item.title)
                    )
                },
                label = {
                    ResponsiveText(
                        text = stringResource(id = item.title),
                        textStyle = TextStyle14,
                        maxLines = 1
                    )
                },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route = route) {
                                saveState = true
                            }
                        }

                        launchSingleTop = true
                        restoreState = true
                    }
                },
                modifier = if (isSelected) {
                    Modifier
                        .clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13))
                        .background(color = DarkGray)
                } else {
                    Modifier.background(color = Color.Unspecified)
                }
            )
        }
    }
}

Answer 1

另一个解决方案是将标签包裹在 a 中BoxWithConstraints并在其外部绘制：

BottomNavigationItem(
    label = {
        /**
         * Because of [BottomNavigationItemHorizontalPadding] (12.dp), we need to
         * think (and draw) outside the box.
         */
        BoxWithConstraints {
            Text(
                modifier = Modifier
                    .wrapContentWidth(unbounded = true)
                    .requiredWidth(maxWidth + 24.dp), // 24.dp = the padding * 2
                text = "Centered text and clipped at the end if too long",
                softWrap = false,
                textAlign = TextAlign.Center
            )
        }
    },
    ...
)

要获得一点填充，您可以设置requiredWidth(maxWidth + 18.dp).

使用此解决方案，您不需要复制整个BottomNavigation:)

Answer 2

显然，当前（我正在使用 compose 版本'1.2.0-rc03'）在使用 BottomNavigation 时是不可能的，因为这些行中的每个元素都设置了填充：

.padding(horizontal = BottomNavigationItemHorizontalPadding)

以下是关于该值的说明：

/**
 * Padding at the start and end of a [BottomNavigationItem]
 */
private val BottomNavigationItemHorizontalPadding = 12.dp

[解决方案]

只需从 androidx 复制BottomNavigation并删除此行：

.padding(horizontal = BottomNavigationItemHorizontalPadding)

但是，第一个和最后一个元素仍然需要填充，因此将innerHorizo​​ntalPaddings参数添加到您的CustomBottomNavigation构造函数中

还有一些更改，您可以在此处查看我的 CustomBottomNavigation 的完整代码

使用示例：

CustomBottomNavigation(
...,
innerHorizontalPaddings = 12.dp
) {
    items.forEach { item ->
        BottomNavigationItem(
            icon = {
                Icon(...)
            },
            label = {
                Text(
                    ...
                    softWrap = false,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.padding(horizontal = 2.dp)
                )
            },
            ...
        )
    }
}