Jetpack Compose 底部栏图标不适合开放元素区域

Question

我在 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)
                } ...

自定义底栏：

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

预期结果：

Expected result

我的结果：

Wrong result

Answer 1

我已经将 Modifier.height(90.dp) 应用到 BottomNavigation 并且现在工作正常。