Jetpack Compose Navigation初始不生效，交互后恢复问题求助

现象 #

• 导航初始加载时页面空白，滚动或长按空白区域后目标页面才正常显示
• 更换多个Navigation Compose版本无效，仅深色主题下无此问题
• 版本2.4.0-alpha10在部分项目可用，部分不可用

相关代码 #

build.gradle(Module:app) #

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

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

    defaultConfig {
        applicationId "com.example.myapplication"
        minSdk 24
        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.3.2'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    def nav_version = "2.5.3"

    implementation "androidx.navigation:navigation-compose:$nav_version"
}

build.gradle(Project) #

plugins {
    id 'com.android.application' version '8.1.0-alpha02' apply false
    id 'com.android.library' version '8.1.0-alpha02' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

MainActivity #

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val navController = rememberNavController()
                    NavHost(navController = navController, startDestination = "younes") {
                        composable("younes") {
                            Text(text = "younes")
                        }
                    }
                }
            }
        }
    }
}

原因分析与解决方案 #

核心原因 #

1. 浅色主题颜色对比度问题：Material3浅色主题中，Surface背景色与Text默认颜色对比度极低（甚至一致），初始加载时文字看似空白，交互触发重组后才正确渲染颜色。
2. Navigation初始重组延迟：部分Navigation Compose版本在初始加载时，NavHost的内容重组被延迟，滚动/长按操作会触发Compose强制重组，从而显示内容。
3. 依赖版本不兼容：项目中Compose BOM、Navigation Compose、Kotlin编译器扩展、Android Gradle Plugin的版本组合存在适配问题，不同项目依赖环境差异导致2.4.0-alpha10表现不一致。

解决步骤 #

1. 修复颜色冲突
   给Text显式指定与背景色有对比度的颜色：

   composable("younes") {
       Text(text = "younes", color = MaterialTheme.colorScheme.onBackground)
   }
   

   也可检查MyApplicationTheme的浅色主题配置，确保onBackground与background颜色差异明显。

2. 调整导航控制器作用域
   将rememberNavController()提升到Surface外部，确保状态变化能正确触发NavHost重组：

   setContent {
       MyApplicationTheme {
           val navController = rememberNavController()
           Surface(
               modifier = Modifier.fillMaxSize(),
               color = MaterialTheme.colorScheme.background
           ) {
               NavHost(navController = navController, startDestination = "younes") {
                   composable("younes") {
                       Text(text = "younes", color = MaterialTheme.colorScheme.onBackground)
                   }
               }
           }
       }
   }
   

3. 统一依赖版本

   • 替换alpha版Android Gradle Plugin为稳定版（如7.4.2或8.0.2），避免未知绘制问题。
   • 升级Kotlin版本到1.8.0+，同步将Kotlin编译器扩展版本调整为1.4.3（与Kotlin 1.8兼容）。
   • 保持Navigation Compose版本与Compose BOM匹配，建议升级到2.6.0（兼容2022.10.00 BOM）。

4. 强制触发初始重组
   若以上方法无效，可添加延迟触发重组的逻辑：

   val context = LocalContext.current
   LaunchedEffect(Unit) {
       delay(100)
       (context as ComponentActivity).window.decorView.invalidate()
   }
   

内容的提问来源于stack exchange，提问作者younes