kotlin 撰写-底部导航主题应用

roejwanj  于 2023-06-24  发布在  Kotlin
关注(0)|答案(1)|浏览(174)

我试图实现一个简单的主题应用程序与数据存储。在启动应用程序更新文本颜色,背景颜色等。但底部导航背景和内容颜色保持不变。当我手动更改时,它会更新。我将示例应用程序添加到Github和屏幕截图中。在最后一张截图中,底部导航背景颜色应为蓝色,但为黑色(默认)。
主要活动:

class MainActivity: ComponentActivity() {

    private lateinit var appDataStore: AppDataStore

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        appDataStore = AppDataStore(applicationContext)
        setContent {
            val themeFlow = appDataStore.theme.collectAsState(initial = CustomTheme.A)
            AppTheme(theme = themeFlow.value) {
                MainScreen(dataStore = appDataStore)
            }
        }
    }
}

@Composable
fun MainScreen(dataStore: AppDataStore) {
    val navController = rememberNavController()
    Scaffold(bottomBar = {
        BottomNavigationBar(navController = navController)
    }) { paddingValues ->
        Box(modifier = Modifier.padding(bottom = paddingValues.calculateBottomPadding())) {
            Column(modifier = Modifier.fillMaxSize()) {
                NavigationGraph(navController = navController, dataStore = dataStore)
            }
        }
    }
}

@Composable
fun NavigationGraph(navController: NavHostController,
                    startDestination: String = "screenB",
                    dataStore: AppDataStore) {
    NavHost(navController, startDestination = startDestination) {
        composable(BottomNavigationModel.A.navigationPath) {
            val screenDataModel = ScreenDataModel(textId = R.string.screen_A)
            ScreenA(screenDataModel)
        }
        composable(BottomNavigationModel.B.navigationPath) {
            val screenDataModel = ScreenDataModel(textId = R.string.screen_B)
            ScreenB(screenDataModel, dataStore)
        }
        composable(BottomNavigationModel.C.navigationPath) {
            val screenDataModel = ScreenDataModel(textId = R.string.screen_C)
            ScreenC(screenDataModel)
        }
    }
}

底部导航栏:

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(BottomNavigationModel.A, BottomNavigationModel.B, BottomNavigationModel.C)
    BottomNavigation(backgroundColor = MaterialTheme.customColors.bottomNavigationBackgroundColor,
        contentColor = MaterialTheme.customColors.bottomNavigationContentColor) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(painterResource(id = item.iconId), contentDescription = "") },
                label = { Text(text = stringResource(id = item.titleId), fontSize = 10.sp) },
                selectedContentColor = MaterialTheme.customColors.bottomNavigationContentColor,
                unselectedContentColor = MaterialTheme.customColors.bottomNavigationContentColor.copy(alpha = 0.4f),
                alwaysShowLabel = true,
                selected = currentRoute == item.navigationPath,
                onClick = {
                    navController.navigate(item.navigationPath) {
                        navController.graph.startDestinationRoute?.let { navigationPath ->
                            popUpTo(navigationPath) {
                                saveState = true
                            }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

主题:

val LocalColors = staticCompositionLocalOf { ThemeACustomColors }

val MaterialTheme.customColors: CustomColors
    @Composable
    @ReadOnlyComposable
    get() = LocalColors.current

@Composable
fun AppTheme(
    theme: CustomTheme = CustomTheme.A,
    content: @Composable () -> Unit
) {
    val colors = when (theme) {
        CustomTheme.B -> ThemeBCustomColors
        CustomTheme.C -> ThemeCCustomColors
        CustomTheme.D -> ThemeDCustomColors
        else -> ThemeACustomColors
    }

    CompositionLocalProvider(LocalColors provides colors) {
        MaterialTheme(
            colors = colors.material,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }

    val useDarkIcons = when (theme) {
        CustomTheme.C, CustomTheme.D -> false
        else -> true
    }

    val systemUiController = rememberSystemUiController()
    systemUiController.setStatusBarColor(colors.statusBarColor, useDarkIcons)
}

Gradle(项目):

buildscript {
    ext {
        compose_ui_version = '1.2.0'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.4.2' apply false
    id 'com.android.library' version '7.4.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
}

Gradle(模块):

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.themeapp'
    compileSdk 33

    defaultConfig {
        applicationId "com.example.themeapp"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.2.0'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.navigation:navigation-compose:2.5.3"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.2.0'
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.0"
    implementation("androidx.datastore:datastore-preferences:1.0.0")
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
}

holgip5t

holgip5t1#

升级lib后,它看起来很好。
Gradle(项目):

buildscript {
    ext {
        compose_ui_version = '1.4.3'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.4.2' apply false
    id 'com.android.library' version '7.4.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false
}

Gradle(模块):

composeOptions {
    kotlinCompilerExtensionVersion '1.4.4'
}

...

dependencies {
    implementation 'androidx.core:core-ktx:1.10.1'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
    implementation 'androidx.activity:activity-compose:1.7.2'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.navigation:navigation-compose:2.6.0"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.4.3'
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.0"
    implementation("androidx.datastore:datastore-preferences:1.0.0")
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
}

相关问题