Kotlin Compose 底部栏

Posted 2022-07-15 安果移不动

package com.anguomob.compose.ui.screens

import androidx.compose.material.*
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.runtime.*
import androidx.compose.ui.graphics.Color
import com.anguomob.compose.model.NavigationItem

@Composable
fun MainFrame() 
    val navigationItems = listOf(
        NavigationItem(title = "学习", icon = Icons.Filled.Home),
        NavigationItem(title = "任务", icon = Icons.Filled.DateRange),
        NavigationItem(title = "我的", icon = Icons.Filled.Person),
    )

    var currentNavigationIndex by remember 
        mutableStateOf(0)
    

    Scaffold(bottomBar = 
        BottomNavigation(
            backgroundColor = MaterialTheme.colors.surface
        ) 
            navigationItems.forEachIndexed()  index, navigationItem ->
                BottomNavigationItem(

                    selected = currentNavigationIndex == index,
                    onClick = 
                        currentNavigationIndex = index
                    ,
                    icon = 
                        Icon(imageVector = navigationItem.icon, contentDescription = null)
                    ,
                    label = 
                        Text(text = navigationItem.title)
                    ,
                    alwaysShowLabel = false,
                    selectedContentColor = Color(0xFF149ee7),
                    unselectedContentColor = Color(0xFF999999)
                )
            
        
    ) 
        Text(text = "Current navagation itme:$currentNavigationIndex")