如何在Android Jetpack Compose中创建圆角底部导航

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0'
    implementation 'androidx.compose.material:material:1.0.0'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.0.0'
}

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.unit.sp
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyAppTheme

@Composable
fun RoundedBottomAppBar() {
    val colors = MaterialTheme.colors
    val context = LocalContext.current

    BottomAppBar(
        backgroundColor = colors.primary,
        contentColor = colors.onPrimary,
        elevation = 8.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .zIndex(1f)
    ) {
        BottomAppBarItems(
            items = listOf(
                BottomNavItem(
                    icon = Icons.Default.Home,
                    label = stringResource(id = R.string.home),
                    onClick = { /* Handle home click */ }
                ),
                BottomNavItem(
                    icon = Icons.Default.Search,
                    label = stringResource(id = R.string.search),
                    onClick = { /* Handle search click */ }
                ),
                BottomNavItem(
                    icon = Icons.Default.Person,
                    label = stringResource(id = R.string.profile),
                    onClick = { /* Handle profile click */ }
                )
            )
        )
    }

    // Rounded corners
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(colors.primary, shape = MaterialTheme.shapes.medium)
            .padding(8.dp)
    ) {
        Column(
            modifier = Modifier
                .align(Alignment.BottomCenter)
        ) {
            BottomAppBar(
                backgroundColor = Color.Transparent,
                contentColor = colors.onPrimary,
                elevation = 0.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {
                BottomAppBarItems(
                    items = listOf(
                        BottomNavItem(
                            icon = Icons.Default.Home,
                            label = stringResource(id = R.string.home),
                            onClick = { /* Handle home click */ }
                        ),
                        BottomNavItem(
                            icon = Icons.Default.Search,
                            label = stringResource(id = R.string.search),
                            onClick = { /* Handle search click */ }
                        ),
                        BottomNavItem(
                            icon = icons.Default.Person,
                            label = stringResource(id = R.string.profile),
                            onClick = { /* Handle profile click */ }
                        )
                    )
                )
            }
        }
    }
}

@Composable
fun BottomNavItem(
    icon: ImageBitmap,
    label: String,
    onClick: () -> Unit
) {
    IconButton(onClick = onClick) {
        Icon(icon, contentDescription = label)
        Text(text = label, style = MaterialTheme.typography.caption.copy(fontSize = 12.sp))
    }
}

@Composable
fun BottomAppBarItems(items: List<BottomNavItem>) {
    items.forEach { item ->
        item
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyAppTheme {
        RoundedBottomAppBar()
    }
}