Jetpack Compose 预览：无背景，无系统 UI

Question

我正在使用 Jetpack Compose 和 Material 引导一个新应用程序 3. 我最近用这个配置创建了一堆新应用程序，所以这个问题让我陷入困境：我无法获得 IDE 的撰写预览以显示背景或系统 UI。编译后的应用程序运行良好。

我尝试构建 this sample app with Jetpack Compose + Material 3 I created a while back，所有预览在相同版本的 IDE 中都很好。我还尝试降级我的库以匹配该示例应用程序的库。没有运气。示例应用程序有工作预览，我的没有。

我的 Gradle 脚本中包含用于我的调试变体的撰写 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
科特林： 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

我发现了两件让我头疼的事情，打破了观点：

我的应用程序分为两个模块，主 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 模块中另外包含 Material 库解决了这个问题。
在整个过程中，我了解到必须让您的应用的主题继承 Theme.Material3.* 基本主题之一，并将您的主题应用到清单中的 <application /> 标记. Android Studio 会尝试警告您 <application /> 标签上的 android:theme 可以删除，因为它只需要进入 <activity />，但该建议是不正确的。在这两个地方都包含您的主题。

Jetpack Compose 预览：无背景，无系统 UI

Jetpack Compose Previews: No Backgrounds, No System UI

android

android-studio

android-jetpack-compose

android-studio-bumblebee

android-jetpack-compose-preview