如何在Android Jetpack Compose中制作圆形底部导航

Question

我想在Android Jetpack Compose中制作底部导航，但我在找到的每个来源中，使用Compose构建的导航都是普通的、平面的，就像这样：。关键是我找不到一种方法来制作像这样的东西：。我应该怎么做呢？谢谢。

- Oğuzhan Aslan

Answer 1

只需使用clip修饰符并在顶部角落添加RoundedCornerShape即可，以下是示例代码

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

- Manohar

---

尝试了一下，但仍然一样 :( - Oğuzhan Aslan

我验证了 Monohars 的解决方案。对我来说也很有效。您使用最新的 Jetpack Compose 库及其 Material 组件吗？ @OğuzhanAslan - Daniel Weidensdörfer

我真傻，我更新了我的库，现在这个解决方案可以用了。 - Oğuzhan Aslan

不兼容Compose 1.2.0。 - alfietap

这个解决方案是有效的，但是底部导航栏剪切区域的颜色与内容的背景颜色不一样。 - mrzbn

Answer 2

使用clip和RoundedCornerShape：

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

- Johann