Jetpack Compose 預覽：無背景，無系統 UI

Question

我正在使用 Jetpack Compose 和 Material 3 引導一個新應用程序。我最近使用此配置創建了一堆新應用程序，所以這個問題讓我陷入困境：我無法讓 IDE 的 compose 預覽顯示背景或系統 UI。 編譯后的應用程序運行良好。

我嘗試使用不久前創建的 Jetpack Compose + Material 3 構建此示例應用程序，所有預覽在 IDE 的同一版本中都很好。我還嘗試降級我的庫以匹配該示例應用程序的庫。 沒有運氣。 示例應用程序有工作預覽，我的沒有。

我的調試變體的 Gradle 腳本中包含 Compose UI 工具，我正在使用調試變體進行預覽。

想法？

這是我看到的：

這就是我生成此屏幕代碼示例的方式：

@Composable
fun LoadingScreen() {
    Column {
        Text("Example")
    }
}

@Preview(name = "Light Mode", showBackground = true)
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Preview(name = "Full Preview", showSystemUi = true)
@Composable
fun PreviewLoadingScreen() {
    MyTheme {
        LoadingScreen()
    }
}

我的主題非常適合 Material 3：

private val DarkColorScheme = darkColorScheme(
    // ...
)

private val LightColorScheme = lightColorScheme(
    // ...
)

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

這是我正在使用的：

• Android Studio Bumblebee： 2021.1.1 補丁 1
• AGP： 7.2.0-alpha05
• Jetpack Compose： 1.2.0-alpha03（也試過 1.1.0）
• Gradle： 7.4
• Kotlin： 1.6.10
• androidx.compose.material3:material3:1.0.0-alpha05
• com.google.android.material:material:1.6.0-alpha01

Answer 1

我認為您的代碼應如下所示：

fun LoadingScreen() {
    Column(
     modifier = Modifier.fillMaxSize() //this line is to set the composable like match_prent
) {
        Text("Example")
    }
}

@Preview(name = "Light Mode", showBackground = true)
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Preview(name = "Full Preview", showSystemUi = true)
@Composable
fun PreviewLoadingScreen() {
    MyTheme {
        Surface { //Surface is like a template to see the theme configuration you need to add it
          LoadingScreen()
        }
    }
}

Answer 2

我發現了兩件讓我頭疼並打破觀點的事情：

1. 我的應用程序分為兩個模塊，主app模塊和shared模塊。 shared模塊在 Gradle 的implementation()列表中同時具有 Material com.google.android.material:material:1.6.0-alpha01和 Material 3 androidx.compose.material3:material3:1.0.0-alpha05庫。但是，我的app模塊只有 Material 3 庫。 在app模塊中另外包含材料庫解決了這個問題。
2. 在整個過程中，我了解到必須讓您的應用程序的主題繼承自Theme.Material3.*基本主題之一，並將您的主題應用於清單中的<application />標記。 Android Studio 會嘗試警告您<application />標簽上的android:theme可以刪除，因為它只需要將 go 放到<activity />上，但該建議是不正確的。 在這兩個地方都包含您的主題。