Jetpack Compose真机与模拟器布局表现不一致问题求助

问题 #

使用Jetpack Compose + Material 3组件开发项目，模拟器（Android 12）测试正常，但在同版本Android 12的Galaxy S10E真机上出现两处差异：

• 已配置NoActionBarTheme，模拟器无ActionBar，真机却显示；
• AlertDialog样式不一致：模拟器上居中显示、不占满宽度；真机上在屏幕底部显示且占满宽度，效果类似Modal Bottom Sheet。

代码 #

package com.alexandrekva.calculadorarv

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import com.alexandrekva.calculadorarv.ui.theme.CalculadoraRVTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CalculadoraRVTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val openDialog = remember { mutableStateOf(true) }
                    if (openDialog.value) {
                        AlertDialog(
                            onDismissRequest = {
                                // Dismiss the dialog when the user clicks outside the dialog or on the back
                                // button. If you want to disable that functionality, simply use an empty
                                // onDismissRequest.
                                openDialog.value = false
                            },
                            title = {
                                Text(text = "Title")
                            },
                            text = {
                                Text(text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim consequat euismod. Pellentesque volutpat aliquam tortor vitae iaculis. Nulla vel felis ante. Ut ultrices a leo vitae tempus.")
                            },
                            confirmButton = {
                                TextButton(
                                    onClick = {
                                        openDialog.value = false
                                    }
                                ) {
                                    Text("Confirm")
                                }
                            },
                            dismissButton = {
                                TextButton(
                                    onClick = {
                                        openDialog.value = false
                                    }
                                ) {
                                    Text("Dismiss")
                                }
                            }
                        )
                    }
                }
            }
        }
    }
}

主题 #

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.CalculadoraRV" parent="android:Theme.Material.Light.NoActionBar" />

    <style name="Theme.CalculadoraRV.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background, animated icon, and animation duration. -->
        <item name="windowSplashScreenBackground">@color/white</item>

        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an
             animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_round_trending_up_24</item>
        <!-- Required for animated icons -->
        <item name="windowSplashScreenAnimationDuration">400</item>

        <!-- Set the theme of the Activity that directly follows your splash screen. -->
        <!-- Required -->
        <item name="postSplashScreenTheme">@style/Theme.CalculadoraRV</item>
    </style>
</resources>

依赖 #

implementation 'androidx.core:core-ktx:1.8.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material3:material3:1.0.0-alpha16"
implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha16"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
implementation 'androidx.activity:activity-compose:1.5.1'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

// Dagger Hilt
implementation 'com.google.dagger:hilt-android:2.42'
annotationProcessor 'com.google.dagger:hilt-compiler:2.42'
implementation 'com.google.dagger:hilt-android:2.42'
kapt 'com.google.dagger:hilt-compiler:2.42'
implementation 'androidx.hilt:hilt-navigation-compose:1.0.0'

// Splash Screen
implementation 'androidx.core:core-splashscreen:1.0.0'

// Navigation
implementation 'androidx.navigation:navigation-compose:2.5.1'

//Gson
implementation 'com.google.code.gson:gson:2.9.1'

解决方案 #

1. 修复ActionBar显示问题 #

当前主题继承的是旧版Material主题，和Compose Material 3兼容性不佳，需改为继承Material 3官方无ActionBar主题：

<style name="Theme.CalculadoraRV" parent="Theme.Material3.Light.NoActionBar">
    <!-- 保留原有自定义配置（如有） -->
</style>

同时确认AndroidManifest.xml中目标Activity使用的是该主题，且无其他代码或配置覆盖主题设置。

2. 修复AlertDialog样式异常问题 #

你使用的Material 3是1.0.0-alpha16早期测试版，存在设备适配bug，加上Galaxy S10E的厂商定制UI影响，导致Dialog样式异常。

修复步骤：

• 升级Material 3版本：将依赖中的alpha版本替换为稳定版（示例为当前最新稳定版，可按需调整）：

implementation "androidx.compose.material3:material3:1.2.1"
implementation "androidx.compose.material3:material3-window-size-class:1.2.1"

• 强制指定Dialog样式（可选）：若升级后仍有问题，显式设置Dialog的内边距和背景色，确保样式统一：

AlertDialog(
    onDismissRequest = { openDialog.value = false },
    title = { Text(text = "Title") },
    text = { Text(text = "Lorem ipsum dolor sit amet...") },
    confirmButton = { /* 原有逻辑 */ },
    dismissButton = { /* 原有逻辑 */ },
    // 强制设置窗口内边距，避免占满宽度
    windowInsets = DialogDefaults.windowInsets,
    // 显式设置容器背景色，对齐主题样式
    containerColor = MaterialTheme.colorScheme.surface
)

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