Android JetPack Compose实现底部导航栏，material3

Android JetPack Compose实现底部导航栏，material3

• • • • • 1.Scaffold + NavigationBar + NavigationBarItem
        • 2.案例实现

          1.Scaffold + NavigationBar + NavigationBarItem

          Scaffold：脚手架，有topBar，bottomBar等参数

          NavigationBar：用于实现导航栏主体

          NavigationBarItem：用于实现导航栏的单个实例

          2.案例实现

          import android.annotation.SuppressLintimport androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.DateRangeimport androidx.compose.material.icons.filled.Homeimport androidx.compose.material.icons.filled.Personimport androidx.compose.material3.ExperimentalMaterial3Apiimport androidx.compose.material3.Iconimport androidx.compose.material3.NavigationBarimport androidx.compose.material3.NavigationBarItemimport androidx.compose.material3.NavigationBarItemDefaultsimport androidx.compose.material3.Scaffoldimport androidx.compose.material3.Textimport androidx.compose.runtime.Composableimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.rememberimport androidx.compose.runtime.setValueimport androidx.compose.ui.graphics.Colorimport com.xyh.app.model.entity.NavigationItemdata class NavigationItem(val label: String, val icon: ImageVector)@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")@OptIn(ExperimentalMaterial3Api::class)@Composablefun MainFrame(){// 数据    val navigationItems = listOf(        NavigationItem("Home", Icons.Filled.Home),        NavigationItem("News", Icons.Filled.DateRange),        NavigationItem("我的", Icons.Filled.Person)    )    // remember    var currentNavigationIndex by remember {        mutableStateOf(0)    }    Scaffold (        bottomBar = {            NavigationBar(                containerColor = Color.White            ) {                navigationItems.forEachIndexed { index, navigationItem->                    NavigationBarItem(                        selected = currentNavigationIndex == index,                         onClick = {                                  currentNavigationIndex = index                        },                        icon = { // 图标                            Icon(                                imageVector = navigationItem.icon,                                contentDescription = null                            )                        },                        label = { // 文字                            Text(text = navigationItem.title)                        },                        alwaysShowLabel = false,                        colors = NavigationBarItemDefaults.colors( // 颜色配置                            selectedIconColor = Color(0xff149ee7),                            selectedTextColor = Color(0xff149ee7),                            unselectedIconColor = Color(0xff999999),                            unselectedTextColor = Color(0xff999999)                        )                    )                }            }        }    )    {        Text(text = "current navigation item: ${currentNavigationIndex}")    }}