Jetpack Compose Bottom Bar图标超出区域，如何调整或排查问题？

我在Jetpack Compose中创建了BottomBar，需求为无背景、带标题的大图标且与屏幕边缘有间距，但图标未适配BottomBar区域。请问是否可增大区域，或是我哪里操作有误？

代码示例 #

主界面代码 #

@Composable
fun FishingShopApp(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController()
) {
   ...

    Crossfade(targetState = Navigator.currentScreen) { currentScreen ->
        Box {
            Image(
                modifier = Modifier.fillMaxSize(),
                painter = painterResource(R.drawable.bg_main_screen),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
            Scaffold(
                topBar = {
                    if (needToShowTopBar(currentScreen.value)) TopAppBar(
                        scaffoldState,
                        coroutineScope
                    )
                },
                drawerContent = {
                    AppDrawer(
                        closeDrawerAction = { coroutineScope.launch { scaffoldState.drawerState.close() } }
                    )
                },
                scaffoldState = scaffoldState,
                bottomBar = {
                    Box(modifier = Modifier.fillMaxWidth()) {
                        CompositionLocalProvider(LocalRippleTheme provides ClearRippleTheme) {
                            CustomBottomBar()
                        }
                    }
                },
                backgroundColor = Color.Transparent,
            ) { innerPadding ->
                BackHandler {
                    Navigator.navigateBack(navController)
                } ...

自定义BottomBar代码 #

@Composable
fun CustomBottomBar() {
    var selectedItem by remember { mutableStateOf(0) }

    val items = listOf(
        NavigationItem(0, R.drawable.ic_home, R.string.scr_main_screen_icon_lbl),
        NavigationItem(
            1,
            R.drawable.ic_fishing,
            R.string.scr_fishing_icon_lbl,
        ),
        NavigationItem(2, R.drawable.ic_basket, R.string.scr_basket_icon_lbl),
    )
    BottomNavigation(
        backgroundColor = Color.Transparent, elevation = 0.dp,
        modifier = Modifier.wrapContentHeight()
    ) {
        items.forEach {
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = ImageVector.vectorResource(id = it.vectorResourceId),
                        contentDescription = stringResource(id = it.contentDescriptionResourceId),
                        tint = if (selectedItem == it.index) Color.White else Green,
                        modifier = Modifier
                            .background(
                                shape = RoundedCornerShape(
                                    topStartPercent = 20,
                                    topEndPercent = 20,
                                    bottomEndPercent = 20,
                                    bottomStartPercent = 20
                                ),
                                color = if (selectedItem == it.index) Green else Color.White,
                            )
                            .padding(if (it.index == 1) 12.dp else 15.dp)
                            .scale(if (it.index == 1) 0.8f else 1f)
                    )
                },
                selected = selectedItem == it.index,
                onClick = {
                    selectedItem = it.index
                },
                label = {
                    Text(
                        text = stringResource(id = it.contentDescriptionResourceId),
                        color = Color.White
                    )
                },
            )
        }
    }
}

效果说明 #

• 预期效果：图标带完整圆角背景，大小适中，底部栏与屏幕边缘有间距，图标+标题能完整适配底部栏区域
• 实际效果：图标圆角背景被挤压截断，底部栏高度不足，图标显示空间受限

解决方案 #

核心修改点 #

1. 增大BottomNavigation的高度，替换默认固定高度，给大图标留出足够空间
2. 给BottomNavigation添加水平内边距，实现与屏幕边缘的间距需求
3. 用size属性直接控制图标大小，替代scale避免布局计算异常
4. 调整背景布局层级，确保圆角背景完整显示
5. 强制显示标题并均分item宽度

修改后的CustomBottomBar代码 #

@Composable
fun CustomBottomBar() {
    var selectedItem by remember { mutableStateOf(0) }

    val items = listOf(
        NavigationItem(0, R.drawable.ic_home, R.string.scr_main_screen_icon_lbl),
        NavigationItem(
            1,
            R.drawable.ic_fishing,
            R.string.scr_fishing_icon_lbl,
        ),
        NavigationItem(2, R.drawable.ic_basket, R.string.scr_basket_icon_lbl),
    )
    BottomNavigation(
        backgroundColor = Color.Transparent, 
        elevation = 0.dp,
        modifier = Modifier
            .height(80.dp) // 自定义底部栏高度
            .padding(horizontal = 16.dp) // 与屏幕边缘的间距
    ) {
        items.forEach { item ->
            BottomNavigationItem(
                icon = {
                    // 将背景移到外层Box，避免图标缩放影响背景显示
                    Box(
                        modifier = Modifier
                            .background(
                                shape = RoundedCornerShape(20),
                                color = if (selectedItem == item.index) Green else Color.White,
                            )
                            .padding(12.dp)
                    ) {
                        Icon(
                            imageVector = ImageVector.vectorResource(id = item.vectorResourceId),
                            contentDescription = stringResource(id = item.contentDescriptionResourceId),
                            tint = if (selectedItem == item.index) Color.White else Green,
                            modifier = Modifier.size(40.dp) // 直接设置图标大小
                        )
                    }
                },
                label = {
                    Text(
                        text = stringResource(id = item.contentDescriptionResourceId),
                        color = Color.White,
                        fontSize = 12.sp
                    )
                },
                selected = selectedItem == item.index,
                onClick = { selectedItem = item.index },
                alwaysShowLabel = true, // 强制显示标题
                modifier = Modifier.weight(1f) // 三个item均分底部栏宽度
            )
        }
    }
}

内容的提问来源于stack exchange，提问作者Sergei Krainyukov