
package com.example.dibudaohang
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import com.example.dibudaohang.ui.theme.DibudaohangTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
DibudaohangTheme {
BottomNavigationExample()
}
}
}
}
@Composable
fun BottomNavigationExample() {
// 使用remember保存选中的项,初始值为0
var selectedItem by remember { mutableStateOf(0) }
// 定义底部导航栏的项
val items = listOf("Home", "Search", "Profile")
// 使用Scaffold布局,包含底部导航栏
Scaffold(
bottomBar = {
// 创建底部导航栏
NavigationBar {
// 遍历items列表,为每个项创建一个NavigationBarItem
items.forEachIndexed { index, item ->
NavigationBarItem(
// 根据index选择不同的图标
icon = {
when (index) {
0 -> Icon(Icons.Default.Home, contentDescription = item)
1 -> Icon(Icons.Default.Search, contentDescription = item)
2 -> Icon(Icons.Default.Person, contentDescription = item)
}
},
// 显示项的标签
label = { Text(item) },
// 判断当前项是否被选中
selected = selectedItem == index,
// 点击事件,更新选中的项
onClick = { selectedItem = index }
)
}
}
}
) { innerPadding ->
// 根据选中的项显示不同的内容
when (selectedItem) {
0 -> Text("Home Screen", modifier = Modifier.padding(innerPadding))
1 -> Text("Search Screen", modifier = Modifier.padding(innerPadding))
2 -> Text("Profile Screen", modifier = Modifier.padding(innerPadding))
}
}
}
注意:在最新的 Jetpack Compose 中,BottomNavigation 已经被 NavigationBar 取代。NavigationBar 是 androidx.compose.material3 包中的新组件,用于实现底部导航栏。