一、Preview注解使用Preview注解实现预览该注解有多个参数annotationclassPreview(valname:String,valgroup:String,IntRange(from1)valapiLevel:Int-1,// TODO(mount): Make this Dp when they are inline classesvalwidthDp:Int-1,// TODO(mount): Make this Dp when they are inline classesvalheightDp:Int-1,vallocale:String,FloatRange(from0.01)valfontScale:Float1f,valshowSystemUi:Booleanfalse,valshowBackground:Booleanfalse,valbackgroundColor:Long0,UiModevaluiMode:Int0,Devicevaldevice:StringDevices.DEFAULT,Wallpapervalwallpaper:IntWallpapers.NONE,)Android Studio 预览窗口的右上角的Build Refresh按钮可以同时拥有多个预览Preview(showBackgroundtrue,nameCompact Preview)Preview(showBackgroundtrue,nameMedium Preview,widthDp700)Preview(showBackgroundtrue,nameExpanded Preview,widthDp1000)二、Preview注解参数name预览名称Preview(name登录按钮预览)ComposablefunLoginButtonPreview(){Button(onClick{}){Text(登录)}}group分组Preview(group按钮组)ComposablefunPrimaryButtonPreview(){Button(onClick{}){Text(主要按钮)}}Preview(group按钮组)ComposablefunSecondaryButtonPreview(){Button(onClick{}){Text(次要按钮)}}widthDp固定宽度heightDp固定高度Preview(widthDp200,heightDp100)ComposablefunFixedSizePreview(){Box(Modifier.background(Color.Blue)){Text(宽 200 dp高 100 dp,colorColor.White)}}showBackground显示背景backgroundColor背景颜色Preview(showBackgroundtrue)ComposablefunWithBackgroundPreview(){Text(背景可见,colorColor.White)}Preview(showBackgroundtrue,backgroundColor0xFF2196F3)ComposablefunCustomBgPreview(){Text(蓝色背景上的文字,colorColor.White)}uiMode深色 / 浅色模式packagecom.example.reply.ui.themeimportandroidx.compose.ui.graphics.Colorvalmd_theme_light_primaryColor(0xFF006879)valmd_theme_light_onPrimaryColor(0xFFFFFFFF)valmd_theme_light_primaryContainerColor(0xFFA9EDFF)valmd_theme_light_onPrimaryContainerColor(0xFF001F26)valmd_theme_light_secondaryColor(0xFF4B6268)valmd_theme_light_onSecondaryColor(0xFFFFFFFF)valmd_theme_light_secondaryContainerColor(0xFFCEE7EE)valmd_theme_light_onSecondaryContainerColor(0xFF061F24)valmd_theme_light_tertiaryColor(0xFF565D7E)valmd_theme_light_onTertiaryColor(0xFFFFFFFF)valmd_theme_light_tertiaryContainerColor(0xFFDDE1FF)valmd_theme_light_onTertiaryContainerColor(0xFF121A37)valmd_theme_light_errorColor(0xFFBA1A1A)valmd_theme_light_errorContainerColor(0xFFFFDAD6)valmd_theme_light_onErrorColor(0xFFFFFFFF)valmd_theme_light_onErrorContainerColor(0xFF410002)valmd_theme_light_backgroundColor(0xFFFBFCFD)valmd_theme_light_onBackgroundColor(0xFF191C1D)valmd_theme_light_surfaceColor(0xFFFBFCFD)valmd_theme_light_onSurfaceColor(0xFF191C1D)valmd_theme_light_surfaceVariantColor(0xFFDBE4E7)valmd_theme_light_onSurfaceVariantColor(0xFF3F484B)valmd_theme_light_outlineColor(0xFF6F797B)valmd_theme_light_inverseOnSurfaceColor(0xFFEFF1F2)valmd_theme_light_inverseSurfaceColor(0xFF2E3132)valmd_theme_light_inversePrimaryColor(0xFF54D7F3)valmd_theme_light_surfaceTintColor(0xFF006879)valmd_theme_light_outlineVariantColor(0xFFBFC8CB)valmd_theme_light_scrimColor(0xFF000000)valmd_theme_dark_primaryColor(0xFF54D7F3)valmd_theme_dark_onPrimaryColor(0xFF003640)valmd_theme_dark_primaryContainerColor(0xFF004E5B)valmd_theme_dark_onPrimaryContainerColor(0xFFA9EDFF)valmd_theme_dark_secondaryColor(0xFFB2CBD2)valmd_theme_dark_onSecondaryColor(0xFF1C343A)valmd_theme_dark_secondaryContainerColor(0xFF334A50)valmd_theme_dark_onSecondaryContainerColor(0xFFCEE7EE)valmd_theme_dark_tertiaryColor(0xFFBEC5EB)valmd_theme_dark_onTertiaryColor(0xFF282F4D)valmd_theme_dark_tertiaryContainerColor(0xFF3E4565)valmd_theme_dark_onTertiaryContainerColor(0xFFDDE1FF)valmd_theme_dark_errorColor(0xFFFFB4AB)valmd_theme_dark_errorContainerColor(0xFF93000A)valmd_theme_dark_onErrorColor(0xFF690005)valmd_theme_dark_onErrorContainerColor(0xFFFFDAD6)valmd_theme_dark_backgroundColor(0xFF191C1D)valmd_theme_dark_onBackgroundColor(0xFFE1E3E4)valmd_theme_dark_surfaceColor(0xFF191C1D)valmd_theme_dark_onSurfaceColor(0xFFE1E3E4)valmd_theme_dark_surfaceVariantColor(0xFF3F484B)valmd_theme_dark_onSurfaceVariantColor(0xFFBFC8CB)valmd_theme_dark_outlineColor(0xFF899295)valmd_theme_dark_inverseOnSurfaceColor(0xFF191C1D)valmd_theme_dark_inverseSurfaceColor(0xFFE1E3E4)valmd_theme_dark_inversePrimaryColor(0xFF006879)valmd_theme_dark_surfaceTintColor(0xFF54D7F3)valmd_theme_dark_outlineVariantColor(0xFF3F484B)valmd_theme_dark_scrimColor(0xFF000000)packagecom.example.reply.ui.themeimportandroid.app.Activityimportandroid.os.Buildimportandroidx.compose.foundation.isSystemInDarkThemeimportandroidx.compose.material3.MaterialThemeimportandroidx.compose.material3.darkColorSchemeimportandroidx.compose.material3.dynamicDarkColorSchemeimportandroidx.compose.material3.dynamicLightColorSchemeimportandroidx.compose.material3.lightColorSchemeimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.SideEffectimportandroidx.compose.ui.platform.LocalContextimportandroidx.compose.ui.platform.LocalViewimportandroidx.core.view.WindowCompatprivatevalLightColorSchemelightColorScheme(primarymd_theme_light_primary,onPrimarymd_theme_light_onPrimary,primaryContainermd_theme_light_primaryContainer,onPrimaryContainermd_theme_light_onPrimaryContainer,secondarymd_theme_light_secondary,onSecondarymd_theme_light_onSecondary,secondaryContainermd_theme_light_secondaryContainer,onSecondaryContainermd_theme_light_onSecondaryContainer,tertiarymd_theme_light_tertiary,onTertiarymd_theme_light_onTertiary,tertiaryContainermd_theme_light_tertiaryContainer,onTertiaryContainermd_theme_light_onTertiaryContainer,errormd_theme_light_error,errorContainermd_theme_light_errorContainer,onErrormd_theme_light_onError,onErrorContainermd_theme_light_onErrorContainer,backgroundmd_theme_light_background,onBackgroundmd_theme_light_onBackground,surfacemd_theme_light_surface,onSurfacemd_theme_light_onSurface,surfaceVariantmd_theme_light_surfaceVariant,onSurfaceVariantmd_theme_light_onSurfaceVariant,outlinemd_theme_light_outline,inverseOnSurfacemd_theme_light_inverseOnSurface,inverseSurfacemd_theme_light_inverseSurface,inversePrimarymd_theme_light_inversePrimary,surfaceTintmd_theme_light_surfaceTint,outlineVariantmd_theme_light_outlineVariant,scrimmd_theme_light_scrim,)privatevalDarkColorSchemedarkColorScheme(primarymd_theme_dark_primary,onPrimarymd_theme_dark_onPrimary,primaryContainermd_theme_dark_primaryContainer,onPrimaryContainermd_theme_dark_onPrimaryContainer,secondarymd_theme_dark_secondary,onSecondarymd_theme_dark_onSecondary,secondaryContainermd_theme_dark_secondaryContainer,onSecondaryContainermd_theme_dark_onSecondaryContainer,tertiarymd_theme_dark_tertiary,onTertiarymd_theme_dark_onTertiary,tertiaryContainermd_theme_dark_tertiaryContainer,onTertiaryContainermd_theme_dark_onTertiaryContainer,errormd_theme_dark_error,errorContainermd_theme_dark_errorContainer,onErrormd_theme_dark_onError,onErrorContainermd_theme_dark_onErrorContainer,backgroundmd_theme_dark_background,onBackgroundmd_theme_dark_onBackground,surfacemd_theme_dark_surface,onSurfacemd_theme_dark_onSurface,surfaceVariantmd_theme_dark_surfaceVariant,onSurfaceVariantmd_theme_dark_onSurfaceVariant,outlinemd_theme_dark_outline,inverseOnSurfacemd_theme_dark_inverseOnSurface,inverseSurfacemd_theme_dark_inverseSurface,inversePrimarymd_theme_dark_inversePrimary,surfaceTintmd_theme_dark_surfaceTint,outlineVariantmd_theme_dark_outlineVariant,scrimmd_theme_dark_scrim,)ComposablefunReplyTheme(darkTheme:BooleanisSystemInDarkTheme(),dynamicColor:Booleanfalse,content:Composable()-Unit){valcolorSchemewhen{dynamicColorBuild.VERSION.SDK_INTBuild.VERSION_CODES.S-{valcontextLocalContext.currentif(darkTheme){dynamicDarkColorScheme(context)}else{dynamicLightColorScheme(context)}}darkTheme-DarkColorSchemeelse-LightColorScheme}valviewLocalView.currentif(!view.isInEditMode){SideEffect{valwindow(view.contextasActivity).window WindowCompat.getInsetsController(window,view).isAppearanceLightStatusBars!darkTheme}}MaterialTheme(colorSchemecolorScheme,typographyTypography,contentcontent)}ComposablefunGreeting(name:String){Box(modifierModifier.fillMaxSize()){Text(textHello,$name!,colorMaterialTheme.colorScheme.primary)}}Preview(nameLight Mode,uiModeConfiguration.UI_MODE_NIGHT_NO)ComposablefunPreviewGreetingLight(){ReplyTheme{Greeting(World)}}Preview(nameDark Mode,uiModeConfiguration.UI_MODE_NIGHT_YES)ComposablefunPreviewGreetingDark(){ReplyTheme{Greeting(World)}}fontScale字体缩放Preview(fontScale1.0f)ComposablefunFontScalePreview1(){Text(some text)}Preview(fontScale2.0f)ComposablefunFontScalePreview2(){Text(some text)}showSystemUi显示系统栏Preview(showSystemUitrue)ComposablefunWithSystemUIPreview(){Column(modifierModifier.fillMaxSize()){Text(顶部有状态栏底部有导航栏)}}