Jetpack Compose横屏时ModalBottomSheet WindowInsets异常问题

问题描述 #

在Jetpack Compose中使用ModalBottomSheet组件时，横屏模式下WindowInsets出现异常，引发布局问题。竖屏状态下组件可正确适配Insets，但切换至横屏后，ModalBottomSheet无法正常调整，出现内容截断或位置偏移的情况。

补充说明 #

已定位该问题，创建此记录供其他开发者参考，同时将在Google Issue Tracker提交相关问题。

• 修复前效果：
• 修复后效果：

环境信息 #

• Kotlin版本："1.9.10"
• Compose配置：

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.3"
}

• 使用的依赖库版本：

1. "androidx.compose:compose-bom:2024.05.00"
2. "androidx.compose.material3:material3:1.2.0"
3. "androidx.core:core-splashscreen:1.0.1"
4. "androidx.activity:activity-compose:1.9.0"
5. "androidx.activity:activity-ktx:1.9.0"
6. "androidx.activity:activity:1.9.0"

• 应用主题：

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
    </style>
    <style name="Theme.Splash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/main</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash</item>
        <item name="postSplashScreenTheme">@style/Theme.AppTheme</item>
    </style>
</resources>

• Android清单：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application
        android:name=".App"
        android:allowBackup="false"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:networkSecurityConfig="@xml/network_security_config"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        tools:targetApi="34">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTask"
            android:theme="@style/Theme.Splash">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

• MainActivity代码（使用FragmentActivity，其他Activity类型也存在该问题）：

class MainActivity : FragmentActivity() {
    private lateinit var splash: SplashScreen
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        splash = installSplashScreen()
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        
        setContent {
            AppTheme {
                val configuration = LocalConfiguration.current
                val sheetState = rememberModalBottomSheetState()
                ModalBottomSheet(
                    sheetState = sheetState,
                    sheetMaxWidth = configuration.screenWidthDp.dp,
                    onDismissRequest = {},
                    content = {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(100.dp)
                                .background(Color.Cyan)
                        )
                    }
                )
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Red),
                    contentAlignment = Alignment.Center,
                    content = {
                        LaunchedEffect(Unit) {
                            delay(3000L) // just for test
                            splash.setKeepOnScreenCondition { false }
                        }
                    }
                )
            }
        }
    }
}

修复方案 #

即使是官方发布的“稳定版”最新库也可能存在问题，解决方案如下：

1. 更新以下依赖库版本：
   • "androidx.core:core-splashscreen:1.0.1" -> "androidx.core:core-splashscreen:1.2.0-alpha01"
   • "androidx.activity:activity-compose:1.9.0" -> "androidx.activity:activity-compose:1.8.0"
   • "androidx.activity:activity-ktx:1.9.0" -> "androidx.activity:activity-ktx:1.8.0"
   • "androidx.activity:activity:1.9.0" -> "androidx.activity:activity:1.8.0"
2. 在build.gradle.kts(:app)中添加以下代码，防止其他库覆盖版本：

configurations.all {
    resolutionStrategy.force("androidx.activity:activity-compose:1.8.0")
    resolutionStrategy.force("androidx.activity:activity-ktx:1.8.0")
    resolutionStrategy.force("androidx.activity:activity:1.8.0")
}

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