如何在 Android Jetpack Compose 中制作圆角底部导航答案

【问题标题】：How to make rounded bottom navigation in Android Jetpack Compose如何在 Android Jetpack Compose 中制作圆角底部导航
【发布时间】：2021-11-17 13:09:19
【问题描述】：

我想在 Android Jetpack compose 中制作底部导航，但在我找到的每个来源中，使用 compose 构建的导航都是正常的，平坦的像这样，

关键是我找不到制作这样的东西的方法

我怎样才能只做一件事？谢谢

【问题讨论】：

标签： android android-jetpack-compose bottomnavigationview

【解决方案1】：

只需使用clip Modifier 并在顶角添加RoundedCornerShape，这里是示例代码

BottomNavigation(
            backgroundColor = colorResource(id = R.color.black),
            modifier = Modifier.fillMaxWidth().clip(RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
        )

【讨论】：

试过了，但还是一样:(
我验证了 Monohars 解决方案。它对我也很好。您是否使用最新的 jetpack compose 库及其材料组件？ @OğuzhanAslan
傻我，我更新了我的库，这个解决方案奏效了

【解决方案2】：

使用clip 和RoundedCornerShap：

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {
    BottomNavigation(modifier = Modifier.clip(shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp))) {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

【讨论】：