Jetpack Compose - @Preview 注解

一、@Preview注解

1. 使用@Preview注解实现预览，该注解有多个参数

annotationclassPreview(valname:String="",valgroup:String="",@IntRange(from=1)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(from=0.01)valfontScale:Float=1f,valshowSystemUi:Boolean=false,valshowBackground:Boolean=false,valbackgroundColor:Long=0,@UiModevaluiMode:Int=0,@Devicevaldevice:String=Devices.DEFAULT,@Wallpapervalwallpaper:Int=Wallpapers.NONE,)

2. Android Studio 预览窗口的右上角的Build & Refresh按钮

3. 可以同时拥有多个预览

@Preview(showBackground=true,name="Compact Preview")@Preview(showBackground=true,name="Medium Preview",widthDp=700)@Preview(showBackground=true,name="Expanded Preview",widthDp=1000)

二、@Preview注解参数

1. name：预览名称

@Preview(name="登录按钮预览")@ComposablefunLoginButtonPreview(){Button(onClick={}){Text("登录")}}

2. group：分组

@Preview(group="按钮组")@ComposablefunPrimaryButtonPreview(){Button(onClick={}){Text("主要按钮")}}@Preview(group="按钮组")@ComposablefunSecondaryButtonPreview(){Button(onClick={}){Text("次要按钮")}}

3. widthDp：固定宽度

4. heightDp：固定高度

@Preview(widthDp=200,heightDp=100)@ComposablefunFixedSizePreview(){Box(Modifier.background(Color.Blue)){Text("宽 200 dp，高 100 dp",color=Color.White)}}

5. showBackground：显示背景

6. backgroundColor：背景颜色

@Preview(showBackground=true)@ComposablefunWithBackgroundPreview(){Text("背景可见",color=Color.White)}@Preview(showBackground=true,backgroundColor=0xFF2196F3)@ComposablefunCustomBgPreview(){Text("蓝色背景上的文字",color=Color.White)}

7. uiMode：深色 / 浅色模式

packagecom.example.reply.ui.themeimportandroidx.compose.ui.graphics.Colorvalmd_theme_light_primary=Color(0xFF006879)valmd_theme_light_onPrimary=Color(0xFFFFFFFF)valmd_theme_light_primaryContainer=Color(0xFFA9EDFF)valmd_theme_light_onPrimaryContainer=Color(0xFF001F26)valmd_theme_light_secondary=Color(0xFF4B6268)valmd_theme_light_onSecondary=Color(0xFFFFFFFF)valmd_theme_light_secondaryContainer=Color(0xFFCEE7EE)valmd_theme_light_onSecondaryContainer=Color(0xFF061F24)valmd_theme_light_tertiary=Color(0xFF565D7E)valmd_theme_light_onTertiary=Color(0xFFFFFFFF)valmd_theme_light_tertiaryContainer=Color(0xFFDDE1FF)valmd_theme_light_onTertiaryContainer=Color(0xFF121A37)valmd_theme_light_error=Color(0xFFBA1A1A)valmd_theme_light_errorContainer=Color(0xFFFFDAD6)valmd_theme_light_onError=Color(0xFFFFFFFF)valmd_theme_light_onErrorContainer=Color(0xFF410002)valmd_theme_light_background=Color(0xFFFBFCFD)valmd_theme_light_onBackground=Color(0xFF191C1D)valmd_theme_light_surface=Color(0xFFFBFCFD)valmd_theme_light_onSurface=Color(0xFF191C1D)valmd_theme_light_surfaceVariant=Color(0xFFDBE4E7)valmd_theme_light_onSurfaceVariant=Color(0xFF3F484B)valmd_theme_light_outline=Color(0xFF6F797B)valmd_theme_light_inverseOnSurface=Color(0xFFEFF1F2)valmd_theme_light_inverseSurface=Color(0xFF2E3132)valmd_theme_light_inversePrimary=Color(0xFF54D7F3)valmd_theme_light_surfaceTint=Color(0xFF006879)valmd_theme_light_outlineVariant=Color(0xFFBFC8CB)valmd_theme_light_scrim=Color(0xFF000000)valmd_theme_dark_primary=Color(0xFF54D7F3)valmd_theme_dark_onPrimary=Color(0xFF003640)valmd_theme_dark_primaryContainer=Color(0xFF004E5B)valmd_theme_dark_onPrimaryContainer=Color(0xFFA9EDFF)valmd_theme_dark_secondary=Color(0xFFB2CBD2)valmd_theme_dark_onSecondary=Color(0xFF1C343A)valmd_theme_dark_secondaryContainer=Color(0xFF334A50)valmd_theme_dark_onSecondaryContainer=Color(0xFFCEE7EE)valmd_theme_dark_tertiary=Color(0xFFBEC5EB)valmd_theme_dark_onTertiary=Color(0xFF282F4D)valmd_theme_dark_tertiaryContainer=Color(0xFF3E4565)valmd_theme_dark_onTertiaryContainer=Color(0xFFDDE1FF)valmd_theme_dark_error=Color(0xFFFFB4AB)valmd_theme_dark_errorContainer=Color(0xFF93000A)valmd_theme_dark_onError=Color(0xFF690005)valmd_theme_dark_onErrorContainer=Color(0xFFFFDAD6)valmd_theme_dark_background=Color(0xFF191C1D)valmd_theme_dark_onBackground=Color(0xFFE1E3E4)valmd_theme_dark_surface=Color(0xFF191C1D)valmd_theme_dark_onSurface=Color(0xFFE1E3E4)valmd_theme_dark_surfaceVariant=Color(0xFF3F484B)valmd_theme_dark_onSurfaceVariant=Color(0xFFBFC8CB)valmd_theme_dark_outline=Color(0xFF899295)valmd_theme_dark_inverseOnSurface=Color(0xFF191C1D)valmd_theme_dark_inverseSurface=Color(0xFFE1E3E4)valmd_theme_dark_inversePrimary=Color(0xFF006879)valmd_theme_dark_surfaceTint=Color(0xFF54D7F3)valmd_theme_dark_outlineVariant=Color(0xFF3F484B)valmd_theme_dark_scrim=Color(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.WindowCompatprivatevalLightColorScheme=lightColorScheme(primary=md_theme_light_primary,onPrimary=md_theme_light_onPrimary,primaryContainer=md_theme_light_primaryContainer,onPrimaryContainer=md_theme_light_onPrimaryContainer,secondary=md_theme_light_secondary,onSecondary=md_theme_light_onSecondary,secondaryContainer=md_theme_light_secondaryContainer,onSecondaryContainer=md_theme_light_onSecondaryContainer,tertiary=md_theme_light_tertiary,onTertiary=md_theme_light_onTertiary,tertiaryContainer=md_theme_light_tertiaryContainer,onTertiaryContainer=md_theme_light_onTertiaryContainer,error=md_theme_light_error,errorContainer=md_theme_light_errorContainer,onError=md_theme_light_onError,onErrorContainer=md_theme_light_onErrorContainer,background=md_theme_light_background,onBackground=md_theme_light_onBackground,surface=md_theme_light_surface,onSurface=md_theme_light_onSurface,surfaceVariant=md_theme_light_surfaceVariant,onSurfaceVariant=md_theme_light_onSurfaceVariant,outline=md_theme_light_outline,inverseOnSurface=md_theme_light_inverseOnSurface,inverseSurface=md_theme_light_inverseSurface,inversePrimary=md_theme_light_inversePrimary,surfaceTint=md_theme_light_surfaceTint,outlineVariant=md_theme_light_outlineVariant,scrim=md_theme_light_scrim,)privatevalDarkColorScheme=darkColorScheme(primary=md_theme_dark_primary,onPrimary=md_theme_dark_onPrimary,primaryContainer=md_theme_dark_primaryContainer,onPrimaryContainer=md_theme_dark_onPrimaryContainer,secondary=md_theme_dark_secondary,onSecondary=md_theme_dark_onSecondary,secondaryContainer=md_theme_dark_secondaryContainer,onSecondaryContainer=md_theme_dark_onSecondaryContainer,tertiary=md_theme_dark_tertiary,onTertiary=md_theme_dark_onTertiary,tertiaryContainer=md_theme_dark_tertiaryContainer,onTertiaryContainer=md_theme_dark_onTertiaryContainer,error=md_theme_dark_error,errorContainer=md_theme_dark_errorContainer,onError=md_theme_dark_onError,onErrorContainer=md_theme_dark_onErrorContainer,background=md_theme_dark_background,onBackground=md_theme_dark_onBackground,surface=md_theme_dark_surface,onSurface=md_theme_dark_onSurface,surfaceVariant=md_theme_dark_surfaceVariant,onSurfaceVariant=md_theme_dark_onSurfaceVariant,outline=md_theme_dark_outline,inverseOnSurface=md_theme_dark_inverseOnSurface,inverseSurface=md_theme_dark_inverseSurface,inversePrimary=md_theme_dark_inversePrimary,surfaceTint=md_theme_dark_surfaceTint,outlineVariant=md_theme_dark_outlineVariant,scrim=md_theme_dark_scrim,)@ComposablefunReplyTheme(darkTheme:Boolean=isSystemInDarkTheme(),dynamicColor:Boolean=false,content:@Composable()->Unit){valcolorScheme=when{dynamicColor&&Build.VERSION.SDK_INT>=Build.VERSION_CODES.S->{valcontext=LocalContext.currentif(darkTheme){dynamicDarkColorScheme(context)}else{dynamicLightColorScheme(context)}}darkTheme->DarkColorSchemeelse->LightColorScheme}valview=LocalView.currentif(!view.isInEditMode){SideEffect{valwindow=(view.contextasActivity).window WindowCompat.getInsetsController(window,view).isAppearanceLightStatusBars=!darkTheme}}MaterialTheme(colorScheme=colorScheme,typography=Typography,content=content)}

@ComposablefunGreeting(name:String){Box(modifier=Modifier.fillMaxSize()){Text(text="Hello,$name!",color=MaterialTheme.colorScheme.primary)}}@Preview(name="Light Mode",uiMode=Configuration.UI_MODE_NIGHT_NO)@ComposablefunPreviewGreetingLight(){ReplyTheme{Greeting("World")}}@Preview(name="Dark Mode",uiMode=Configuration.UI_MODE_NIGHT_YES)@ComposablefunPreviewGreetingDark(){ReplyTheme{Greeting("World")}}

8. fontScale：字体缩放

@Preview(fontScale=1.0f)@ComposablefunFontScalePreview1(){Text("some text")}@Preview(fontScale=2.0f)@ComposablefunFontScalePreview2(){Text("some text")}

9. showSystemUi：显示系统栏

@Preview(showSystemUi=true)@ComposablefunWithSystemUIPreview(){Column(modifier=Modifier.fillMaxSize()){Text("顶部有状态栏，底部有导航栏")}}