得到

2026-07-15 16:57:36 +08:00
parent 723ce1af5c
commit 95aa018b8b
314 changed files with 8910 additions and 0 deletions
@@ -0,0 +1,48 @@
+# Preview
+## Preview
+You can use the **@Preview** annotation to preview compose functions inside Android Studio.
+Preview can not be used on Composables that have parameters without a default parameter.
+
+```kotlin
+@Preview
+@Composable
+fun TextDemo(){
+    Text("Hello")
+}
+
+@Preview(name = "MyPreviewName")
+@Composable
+fun TextDemo2(){
+    Text("Hello")
+}
+
+```
+Android Studio Preview
+<p align="center">
+  <img src ="../../../images/general/preview/ComposePreview.png"  height=100 width=300 />
+</p>
+
+
+## Group Previews
+
+```kotlin
+ @Preview(group = "TestGroup1")
+```
+The Preview annotation has a group parameter. You can use it to set a group name to your previews.
+<p align="center">
+  <img src ="../../../images/general/preview/grouppreviews.png"   />
+</p>
+
+The layout preview will now have an option to filter all the previews by the group name.
+
+## Interactive Previews
+<p align="center">
+  <img src ="../../../images/general/preview/interactivepreview.png"   />
+</p>
+
+Above a generated preview in Android Studio you will find an "Interactive" Button. It will open your Composable in an interactive preview mode where can try your Composable directly inside
+Android Studio.
+
+
+## See also:
+* [Official Docs](https://developer.android.com/jetpack/compose/tooling#preview-features)
@@ -0,0 +1,71 @@
+# PreviewParameter
+
+You can use **@PreviewParameter** to provide sample data for your Composables.
+Let's say you have the following Composable and you want to generate a preview.
+
+```kotlin
+data class User(val name :String,val age:Int)
+
+@Composable
+fun UserInfo(user:User) {
+    Text(user.name+ " "+user.age)
+}
+```
+
+Because UserInfo needs a User you can't directly use @Preview.
+One way is to wrap your Composable in a Composable that provides a User
+
+```kotlin
+@Preview
+@Composable
+fun UserPreview() {
+    UserInfo(user = User("Jens", 31))
+}
+```
+
+An other way is to use @PreviewParameter on the parameter. With PreviewParameter you can set a class
+which will provide values for the needed User
+
+```kotlin
+@Preview
+@Composable
+fun UserInfo(@PreviewParameter(SampleUserProvider::class) user:User) {
+    Text(user.name+ " "+user.age)
+}
+```
+### Create PreviewParameterProvider
+
+**SampleUserProvider::class** will be the class which provides a User.
+To create a PreviewParameterProvider you need to implement the interface PreviewParameterProvider.
+The interface has two properties.
+
+**values** is a sequence of your sample data.
+
+```kotlin
+class SampleUserProvider: PreviewParameterProvider<User> {
+    override val values = sequenceOf(User("Jens",31),User("Jim",44))
+}
+```
+
+### Use PreviewParameterProvider
+You can annotate your parameter with @PreviewParameter and the class which provides the sample data.
+
+```kotlin
+@Preview
+@Composable
+fun UserInfo(@PreviewParameter(SampleUserProvider::class) user:User) {
+    Text(user.name+ " "+user.age)
+}
+```
+
+Now Android Studio will generate a preview of the Composable for every value that your provider provides.
+
+<p align="center">
+  <img src ="../../../images/general/preview/previewParam1.png"  height=100 width=300 />
+</p>
+
+You can limit the amount of previews by settings a limit to PreviewParameter.
+
+```kotlin
+@PreviewParameter(SampleUserProvider::class,1)
+```