1

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

我尝试使用不久前创建的 Jetpack Compose + Material 3 构建此示例应用程序，并且所有预览在同一版本的 IDE 中都很好。我还尝试降级我的库以匹配该示例应用程序的库。没运气。示例应用程序有工作预览，我的没有。

我确实在我的 Gradle 脚本中包含了用于调试变体的 compose UI 工具，并且我正在使用调试变体进行预览。

想法？

这是我看到的：

IDE 预览

这就是我生成此屏幕代码示例的方式：

@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()
    }
}

我的主题非常适合材料 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）
  • 分级： 7.4
  • 科特林： 1.6.10
  • androidx.compose.material3:material3:1.0.0-alpha05
  • com.google.android.material:material:1.6.0-alpha01
4

1 回答 1

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()
        }
    }
}
于 2022-02-17T21:25:10.990 回答