如何在 Android Jetpack Compose 中進行圓底導航

Question

我想在 Android Jetpack compose 中制作一個底部導航，但是在我找到的每個來源中，用 compose 構建的導航都是正常的，平坦的就像這樣，

關鍵是我找不到制作這樣的東西的方法

我怎么能只做一件事？ 謝謝

Answer 1

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

Answer 2

只需使用clip Modifier器並添加帶有頂角的RoundedCornerShape ，這里是示例代碼

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