我做了一个底部酒吧在撰写,但由于某种原因,我不能对齐的标题底部,也许是因为底部酒吧有一个底部边框,我不确定,但我想少的空间下的标题,所以我想对齐他们一点低,并采取的图片上面一点。所以我想同时向下滚动图像和标题。我添加了填充,但它不能正常工作。你能帮我吗?这是我的密码
酒店BottomBar
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BaseBottomBar(
currentDestination: NavDestination?,
navController: NavHostController,
bottomSheetState: ModalBottomSheetState
) {
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
val coroutineScope = rememberCoroutineScope()
val bottomBarItemCount = 5
val dividerLength = screenWidth / bottomBarItemCount
val dividerColor = MaterialTheme.colors.contrastColor
Box(
modifier = Modifier
.fillMaxWidth()
.statusBarsPadding()
) {
BottomAppBar(
modifier = Modifier
.fillMaxWidth()
) {
Box(modifier = Modifier.fillMaxSize()) {
BottomNavigation {
BottomAppBarItems.values().toList().forEach { item ->
BottomNavigationItem(
modifier = Modifier.padding(bottom = 2.dp, top = 7.dp),
label = {
item.title?.let {
Text(
text = stringResource(id = it),
fontSize = 11.sp,
softWrap = false, // Align the title to the center,
textAlign = TextAlign.Center,
)
}
},
icon = {
item.icon?.let {
Icon(
imageVector = ImageVector.vectorResource(id = it),
contentDescription = "Navigation Icon",
)
}
},
selected = currentDestination?.hierarchy?.any {
it.route == item.route
} == true,
unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
onClick = {
item.route?.let {
navController.navigate(it) {
popUpTo(navController.graph.findStartDestination().id)
launchSingleTop = true
}
}
}
)
}
}
Divider(
modifier = Modifier
.width(dividerLength),
thickness = 2.dp,
color = dividerColor
)
}
}
FancyCenterItem(
modifier = Modifier
.align(Alignment.Center),
centerItemIcon = ImageVector.vectorResource(R.drawable.ic_bottom_bar_fab),
contentColor = DefaultDYTColor,
centerItemOnClick = {
coroutineScope.launch {
if (bottomSheetState.isVisible)
bottomSheetState.hide()
else
bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
}
},
backgroundColor = Color.Transparent
)
}
}
@Composable
fun FancyCenterItem(
modifier: Modifier,
centerItemIcon: ImageVector,
contentColor: Color,
backgroundColor: Color,
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(0.dp, 0.dp),
centerItemOnClick: () -> Unit
) {
FloatingActionButton(
modifier = modifier,
onClick = (centerItemOnClick),
backgroundColor = backgroundColor,
contentColor = contentColor,
elevation = elevation
) {
Icon(
imageVector = centerItemIcon,
contentDescription = "fab button"
)
}
}
BottomAppBarItems
enum class BottomAppBarItems(
val icon: Int?,
val title: Int?,
val route: String?
) {
HOME(
route = BottomBarScreen.HomeScreen.route,
title = R.string.main,
icon = R.drawable.ic_bottom_bar_home_light_theme
),
SEARCH(
route = BottomBarScreen.ContentScreen.route,
title = R.string.search,
icon = R.drawable.ic_search
),
FAB(
route = null,
title = null,
icon = null
),
HEALTH(
route = BottomBarScreen.PlansScreen.route,
title = R.string.health,
icon = R.drawable.ic_apple
),
OTHERS(
route = BottomBarScreen.DietitiansScreen.route,
title = R.string.other,
icon = R.drawable.ic_others
)
}
1条答案
按热度按时间esbemjvw1#
可以尝试使用.align()修饰符将标签与BottomNavigationView的底部对齐。可以使用BottomNavigationItemBuilder.label参数传入包含标签文本的Composable,然后使用Box()Composable将标签文本与每个单独的BottomNavigationItem的底部对齐。下面是对代码的修改示例:
在这里,我们使用一个Box(),contentAlignment设置为Alignment.BottomCenter围绕标签文本,高度为18.dp,以减少标签和BottomNavigationView之间的空间。您可以根据需要调整此值。BottomNavigationItem的padding已设置为vertical = 7.dp,以便在图标和标签之间给予一些额外的空间。