Kotlin Compose 底部栏

最新推荐文章于 2024-05-24 22:42:56 发布

安果移不动

最新推荐文章于 2024-05-24 22:42:56 发布

阅读量343

点赞数

分类专栏： # 038Compose 文章标签： kotlin 开发语言 android

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/125795647

版权

Compose Android BottomNavigationView NavigationItem Scaffold

关键词由CSDN通过智能技术生成

038Compose 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

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