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

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

1.Scaffold + NavigationBar + NavigationBarItem2.案例实现

1.Scaffold + NavigationBar + NavigationBarItem

Scaffold：脚手架，有topBar，bottomBar等参数 NavigationBar：用于实现导航栏主体 NavigationBarItem：用于实现导航栏的单个实例

2.案例实现

import android.annotation.SuppressLint

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.filled.DateRange

import androidx.compose.material.icons.filled.Home

import androidx.compose.material.icons.filled.Person

import androidx.compose.material3.ExperimentalMaterial3Api

import androidx.compose.material3.Icon

import androidx.compose.material3.NavigationBar

import androidx.compose.material3.NavigationBarItem

import androidx.compose.material3.NavigationBarItemDefaults

import androidx.compose.material3.Scaffold

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf

import androidx.compose.runtime.remember

import androidx.compose.runtime.setValue

import androidx.compose.ui.graphics.Color

import com.xyh.app.model.entity.NavigationItem

data class NavigationItem(val label: String, val icon: ImageVector)

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")

@OptIn(ExperimentalMaterial3Api::class)

@Composable

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

}

}

精彩文章

 您阅读本篇文章共花了：