कंपोज़ेबल प्रीव्यू की मदद से, अपने यूज़र इंटरफ़ेस (यूआई) की झलक देखें

कंपोज़ेबल को किसी फ़ंक्शन से तय किया जाता है और @Composable के साथ एनोटेट किया जाता है:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

इस कंपोज़ेबल की झलक देखने के लिए, एक और कंपोज़ेबल बनाएं. साथ ही, उसे @Composable और @Preview के साथ एनोटेट करें. एनोटेट किए गए इस नए कंपोज़ेबल में अब वह कंपोज़ेबल शामिल है जिसे आपने शुरुआत में बनाया था, SimpleComposable:

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@Preview एनोटेशन, Android Studio को बताता है कि इस कंपोज़ेबल को इस फ़ाइल के डिज़ाइन व्यू में दिखाया जाना चाहिए. बदलाव करते समय, आपको कंपोज़ेबल की झलक में लाइव अपडेट दिखेंगे.

ध्यान दें: Android Wear, झलक के लिए अलग-अलग एनोटेशन का इस्तेमाल करता है (@WearPreviewDevices और @WearPreviewFontScales); ज़्यादा जानकारी के लिए, झलक का इस्तेमाल करके, स्क्रीन और फ़ॉन्ट के साइज़ के कॉम्बिनेशन की जांच करना देखें.

Android Studio में @Preview को रेंडर करने के तरीके को पसंद के मुताबिक बनाने के लिए, अपने कोड में मैन्युअल तरीके से पैरामीटर जोड़े जा सकते हैं. एक ही फ़ंक्शन में कई बार @Preview एनोटेशन जोड़ा जा सकता है, ताकि अलग-अलग प्रॉपर्टी वाले कंपोज़ेबल की झलक देखी जा सके.

ध्यान दें: अगर आपके पास कंपोज़ेबल की कई झलक हैं, लेकिन आपको एक बार में एक ही झलक पर फ़ोकस करना है, तो हमारा सुझाव है कि आप रेंडरिंग के संसाधनों को बचाने के लिए, फ़ोकस मोड का इस्तेमाल करें. जब आपको यूज़र इंटरफ़ेस (यूआई) के सभी वैरिएंट एक साथ देखने हों, तो ग्रिड या सूची मोड पर स्विच करें. डिज़ाइन टैब में सबसे ऊपर मौजूद मेन्यू का इस्तेमाल करके, मोड के बीच टॉगल किया जा सकता है.

@Preview कंपोज़ेबल का इस्तेमाल करने का एक मुख्य फ़ायदा यह है कि आपको Android Studio में एम्युलेटर पर निर्भर नहीं रहना पड़ता. एम्युलेटर को शुरू करने में ज़्यादा मेमोरी खर्च होती है. इसलिए, इसे सेव करके रखा जा सकता है. इससे, आपको ऐप्लिकेशन के लुक और स्टाइल में ज़्यादा बदलाव करने में मदद मिलेगी. साथ ही, @Preview की मदद से, कोड में छोटे-मोटे बदलाव आसानी से किए जा सकते हैं और उनकी जांच की जा सकती है.

@Preview एनोटेशन का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, अपनी स्क्रीन को इनपुट के तौर पर मिलने वाली स्थिति और आउटपुट के तौर पर मिलने वाले इवेंट के हिसाब से तय करें.

@Preview के बारे में बताएं

Android Studio में कुछ ऐसी सुविधाएं मिलती हैं जिनसे कंपोज़ेबल की झलक को बेहतर बनाया जा सकता है. आपके पास उनके कंटेनर डिज़ाइन को बदलने, उनसे इंटरैक्ट करने या उन्हें सीधे किसी एम्युलेटर या डिवाइस पर डिप्लॉय करने का विकल्प होता है.

डाइमेंशन

डिफ़ॉल्ट रूप से, @Preview डाइमेंशन अपने-आप चुने जाते हैं, ताकि कॉन्टेंट को रैप किया जा सके. डाइमेंशन को मैन्युअल तरीके से सेट करने के लिए, heightDp और widthDp पैरामीटर जोड़ें. इन वैल्यू को पहले से ही dp के तौर पर समझा जाता है. इसलिए, आपको इनमें .dp जोड़ने की ज़रूरत नहीं है:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}
AndroidStudioComposeSnippets.kt

डाइनैमिक कलर की झलक

अगर आपने अपने ऐप्लिकेशन में डाइनैमिक कलर की सुविधा चालू की है, तो वॉलपेपर स्विच करने के लिए wallpaper एट्रिब्यूट का इस्तेमाल करें. इससे आपको यह देखने में मदद मिलेगी कि अलग-अलग उपयोगकर्ताओं के चुने गए वॉलपेपर पर, आपका यूज़र इंटरफ़ेस (यूआई) किस तरह से काम करता है. Wallpaper क्लास से उपलब्ध अलग-अलग वॉलपेपर थीम में से कोई एक चुनें. इस सुविधा के लिए, Compose 1.4.0 या इसके बाद का वर्शन होना ज़रूरी है.

अलग-अलग डिवाइसों के साथ इस्तेमाल करना

Android Studio Flamingo में, झलक एनोटेशन के device पैरामीटर में बदलाव किया जा सकता है. इससे, अलग-अलग डिवाइसों पर कंपोज़ेबल के लिए कॉन्फ़िगरेशन तय किए जा सकते हैं.

जब डिवाइस पैरामीटर में कोई खाली स्ट्रिंग (@Preview(device = "")) हो, तो Ctrl + Space दबाकर, ऑटोकंप्लीट की सुविधा को चालू किया जा सकता है. इसके बाद, हर पैरामीटर की वैल्यू सेट की जा सकती हैं.

अपने-आप पूरा होने की सुविधा की मदद से, सूची में से किसी भी डिवाइस का विकल्प चुना जा सकता है. उदाहरण के लिए, @Preview(device = "id:pixel_4"). इसके अलावा, हर पैरामीटर की अलग-अलग वैल्यू सेट करने के लिए, spec:width=px,height=px,dpi=int… को चुनकर, पसंद के मुताबिक डिवाइस की जानकारी डाली जा सकती है.

लागू करने के लिए, Enter दबाएं या रद्द करने के लिए, Esc दबाएं.

अगर आपने कोई अमान्य वैल्यू सेट की है, तो एलान को लाल रंग से अंडरलाइन किया जाता है. साथ ही, उसे ठीक करने का विकल्प भी उपलब्ध हो सकता है (Alt + Enter (macOS के लिए ⌥ + ⏎) > … से बदलें. जांच करने पर, आपके इनपुट से सबसे ज़्यादा मिलता-जुलता समाधान देने की कोशिश की जाती है.

स्थान-भाषा

अलग-अलग उपयोगकर्ता लोकेल की जांच करने के लिए, locale पैरामीटर जोड़ें:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}
AndroidStudioComposeSnippets.kt

बैकग्राउंड का रंग सेट करें

डिफ़ॉल्ट रूप से, आपका कंपोज़ेबल पारदर्शी बैकग्राउंड के साथ दिखता है. बैकग्राउंड जोड़ने के लिए, showBackground और backgroundColor पैरामीटर जोड़ें. ध्यान रखें कि backgroundColor एक ARGB Long है, न कि Color वैल्यू:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

सिस्टम यूज़र इंटरफ़ेस (यूआई)

अगर आपको झलक में स्टेटस और कार्रवाई बार दिखाने हैं, तो showSystemUi पैरामीटर जोड़ें:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

यूज़र इंटरफ़ेस (यूआई) मोड

uiMode पैरामीटर, Configuration.UI_* कॉन्स्टेंट में से कोई भी वैल्यू ले सकता है. इससे आपको झलक के व्यवहार में बदलाव करने की सुविधा मिलती है. उदाहरण के लिए, झलक को नाइट मोड पर सेट करके देखा जा सकता है कि थीम कैसी दिखती है.

LocalInspectionMode

LocalInspectionMode CompositionLocal से पढ़ा जा सकता है कि कंपोज़ेबल को झलक में रेंडर किया गया है या नहीं. यह झलक, जांच किए जा सकने वाले कॉम्पोनेंट में मौजूद होती है. अगर कंपोज़िशन को झलक में रेंडर किया जाता है, तो LocalInspectionMode.current की वैल्यू true होती है. इस जानकारी की मदद से, झलक को पसंद के मुताबिक बनाया जा सकता है. उदाहरण के लिए, झलक वाली विंडो में असल डेटा दिखाने के बजाय, प्लेसहोल्डर की इमेज दिखाई जा सकती है.

इस तरह, सीमाओं को भी हल किया जा सकता है. उदाहरण के लिए, नेटवर्क अनुरोध को कॉल करने के बजाय सैंपल डेटा दिखाना.

@Composable
fun GreetingScreen(name: String) {
    if (LocalInspectionMode.current) {
        // Show this text in a preview window:
        Text("Hello preview user!")
    } else {
        // Show this text in the app:
        Text("Hello $name!")
    }
}
AndroidStudioComposeSnippets.kt

@Preview के साथ इंटरैक्ट करना

Android Studio में ऐसी सुविधाएं मिलती हैं जिनकी मदद से, तय की गई झलक के साथ इंटरैक्ट किया जा सकता है. इस इंटरैक्शन से, आपको झलक के रनटाइम के व्यवहार को समझने में मदद मिलती है. साथ ही, झलक की मदद से यूज़र इंटरफ़ेस (यूआई) को बेहतर तरीके से नेविगेट किया जा सकता है.

इंटरैक्टिव मोड

इंटरैक्टिव मोड की मदद से, झलक के साथ उसी तरह इंटरैक्ट किया जा सकता है जिस तरह फ़ोन या टैबलेट जैसे किसी डिवाइस पर प्रोग्राम को चलाया जाता है. इंटरैक्टिव मोड को सैंडबॉक्स एनवायरमेंट में अलग रखा जाता है. इसका मतलब है कि इसे अन्य झलक से अलग रखा जाता है. इसमें, झलक में मौजूद एलिमेंट पर क्लिक किया जा सकता है और उपयोगकर्ता का इनपुट डाला जा सकता है. यह कंपोज़ेबल के अलग-अलग स्टेटस, जेस्चर, और ऐनिमेशन को टेस्ट करने का एक तेज़ तरीका है.

कोड नेविगेशन और कंपोज़ेबल आउटलाइन

किसी झलक पर कर्सर घुमाकर, उसमें मौजूद कंपोज़ेबल की आउटलाइन देखी जा सकती हैं. किसी कंपोज़ेबल आउटलाइन पर क्लिक करने से, एडिटर व्यू ट्रिगर होता है. इससे, उसकी परिभाषा पर नेविगेट किया जा सकता है.

झलक देखें

किसी खास @Preview को एम्युलेटर या फ़िज़िकल डिवाइस पर चलाया जा सकता है. झलक को उसी प्रोजेक्ट ऐप्लिकेशन में नए Activity के तौर पर डिप्लॉय किया जाता है. इसलिए, यह उसी कॉन्टेक्स्ट और अनुमतियों को शेयर करता है. अगर अनुमति पहले ही दी जा चुकी है, तो आपको अनुमति मांगने के लिए छोटे-मोटे बदलाव वाले कोड लिखने की ज़रूरत नहीं है.

ध्यान दें: @Preview एनोटेशन पर लागू किए गए आर्ग्युमेंट (उदाहरण के लिए, widthDp, locale वगैरह), चलाए और डिप्लॉय किए गए झलक पर लागू नहीं होते.

@Preview एनोटेशन के बगल में या झलक के सबसे ऊपर मौजूद, झलक देखें आइकॉन पर क्लिक करें. इसके बाद, Android Studio उस @Preview को आपके कनेक्ट किए गए डिवाइस या एम्युलेटर पर डिप्लॉय कर देता है.

@Preview रेंडर को कॉपी करें

रेंडर की गई हर झलक को इमेज के तौर पर कॉपी किया जा सकता है. इसके लिए, उस पर राइट क्लिक करें.

एक ही @Preview एनोटेशन की कई झलक

एक ही @Preview कंपोज़ेबल के कई वर्शन दिखाए जा सकते हैं. इसके लिए, अलग-अलग स्पेसिफ़िकेशन या कंपोज़ेबल को पास किए गए अलग-अलग पैरामीटर का इस्तेमाल किया जा सकता है. इस तरह, छोटे-मोटे बदलाव वाले कोड को कम किया जा सकता है.

मल्टीप्रिव्यू टेंप्लेट

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ में, मल्टीप्रिव्यू एपीआई टेंप्लेट उपलब्ध कराए गए हैं: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, और @PreviewDynamicColors. इनकी मदद से, सिर्फ़ एक एनोटेशन का इस्तेमाल करके, सामान्य स्थितियों में Compose यूज़र इंटरफ़ेस (यूआई) की झलक देखी जा सकती है.

कस्टम मल्टीप्रीव्यू एनोटेशन बनाना

मल्टीप्रिव्यू की मदद से, एक एनोटेशन क्लास तय की जा सकती है. इसमें अलग-अलग कॉन्फ़िगरेशन वाले कई @Preview एनोटेशन होते हैं. किसी कंपोज़ेबल फ़ंक्शन में इस एनोटेशन को जोड़ने पर, सभी अलग-अलग झलकें एक साथ अपने-आप रेंडर हो जाती हैं. उदाहरण के लिए, इस एनोटेशन का इस्तेमाल करके, एक ही समय पर कई डिवाइसों, फ़ॉन्ट के साइज़ या थीम की झलक देखी जा सकती है. इसके लिए, हर कंपोज़ेबल के लिए उन परिभाषाओं को दोहराने की ज़रूरत नहीं होती.

सबसे पहले, अपनी पसंद के मुताबिक एनोटेशन क्लास बनाएं:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews
AndroidStudioComposeSnippets.kt

अपने झलक वाले कंपोज़ेबल के लिए, इस कस्टम एनोटेशन का इस्तेमाल किया जा सकता है:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

झलक दिखाने वाले एनोटेशन के ज़्यादा बेहतर सेट बनाने के लिए, एक से ज़्यादा मल्टीप्रिव्यू एनोटेशन और सामान्य झलक दिखाने वाले एनोटेशन को जोड़ा जा सकता है. मल्टीप्रिव्यू एनोटेशन को जोड़ने का मतलब यह नहीं है कि सभी अलग-अलग कॉम्बिनेशन दिखाए जाएं. इसके बजाय, हर मल्टीप्रिव्यू एनोटेशन अलग से काम करता है और सिर्फ़ अपने वैरिएंट रेंडर करता है.

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

मल्टीप्रिव्यू और सामान्य प्रिव्यू की मिक्स-ऐंड-मैच सुविधा की मदद से, बड़े पैमाने के प्रोजेक्ट की कई प्रॉपर्टी को ज़्यादा बेहतर तरीके से टेस्ट किया जा सकता है.

@Preview और बड़े डेटा सेट

अक्सर, आपको अपने कंपोज़ेबल की झलक में एक बड़ा डेटासेट पास करना पड़ता है. ऐसा करने के लिए, @PreviewParameter एनोटेशन के साथ पैरामीटर जोड़कर, कंपोज़ेबल झलक वाले फ़ंक्शन में सैंपल डेटा पास करें.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

सैंपल डेटा उपलब्ध कराने के लिए, एक ऐसी क्लास बनाएं जो PreviewParameterProvider को लागू करती हो और सैंपल डेटा को क्रम से दिखाती हो.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

यह क्रम में मौजूद हर डेटा एलिमेंट के लिए एक झलक रेंडर करता है:

एक से ज़्यादा झलक के लिए, एक ही प्रोवाइडर क्लास का इस्तेमाल किया जा सकता है. ज़रूरी होने पर, लिमिट पैरामीटर सेट करके झलक की संख्या को सीमित करें.

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

@PreviewParameter का इस्तेमाल करने वाली झलक को डिफ़ॉल्ट रूप से, पैरामीटर इंडेक्स और प्रॉपर्टी के नाम (उपयोगकर्ता 0, उपयोगकर्ता 1, उपयोगकर्ता 2 वगैरह) का इस्तेमाल करके नाम दिया जाता है. इससे उन्हें अलग-अलग पहचानना मुश्किल हो सकता है. झलक को ज़्यादा साफ़ तौर पर दिखाने के लिए, हर झलक के लिए पसंद के मुताबिक डिसप्ले नेम दिए जा सकते हैं. इसके लिए, आपको PreviewParameterProvider में getDisplayName() को बदलना होगा. इससे, डेटा के अलग-अलग वैरिएंट या यूज़र इंटरफ़ेस (यूआई) की स्थितियों के बीच अंतर करने में मदद मिलती है. उदाहरण के लिए, इनपुट डेटा के आधार पर झलक को लेबल किया जा सकता है:

class UserAgePreviewParameterProvider : PreviewParameterProvider<User> {
    // Using a List internally for efficient index-based access
    private val userList = listOf(
        User(name = "Elise", age = 30),
        User(name = "Frank", age = 31),
        User(name = "Julia", age = 40)
    )

    override val values = userList.asSequence()

    override fun getDisplayName(index: Int): String? {
        // Return null or an empty string to use the default index-based name
        val user = userList.getOrNull(index) ?: return null
        return "${user.name} - ${user.age}"
    }
}
AndroidStudioComposeSnippets.kt

सलाह: बेहतर परफ़ॉर्मेंस के लिए, PreviewParameterProvider में Sequence के साथ List का इस्तेमाल करें. इससे getDisplayName() में इंडेक्स के आधार पर तेज़ी से ऐक्सेस मिलता है. साथ ही, बड़े क्रमों में धीमी खोज से बचा जा सकता है.

एआई की मदद से झलक जनरेट करना

Android Studio में मौजूद एआई एजेंट, आपके कंपोज़ेबल के लिए Compose की झलक अपने-आप जनरेट कर सकता है. किसी कंपोज़ेबल फ़ंक्शन पर राइट क्लिक करें और एआई > [कंपोज़ेबल का नाम]के लिए झलक जनरेट करें को चुनें. एजेंट आपके कंपोज़ेबल का विश्लेषण करता है, ताकि सही पैरामीटर के साथ ज़रूरी @Preview बॉयलरप्लेट जनरेट किया जा सके. इससे आपको तुरंत यह पुष्टि करने में मदद मिलती है कि आपका यूज़र इंटरफ़ेस (यूआई) उम्मीद के मुताबिक रेंडर हो रहा है या नहीं.

एआई का इस्तेमाल करके, कंपोज़ की झलक जनरेट करें.

एनोटेशन क्लास @Preview

Android Studio में @Preview एनोटेशन पर 'Ctrl या ⌘ + क्लिक' करके, उन सभी पैरामीटर की सूची देखी जा सकती है जिनमें बदलाव करके, झलक को पसंद के मुताबिक बनाया जा सकता है.

annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    val widthDp: Int = -1,
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)
AndroidStudioComposeSnippets.kt

सीमाएं और सबसे सही तरीके

Android Studio, झलक वाले सेक्शन में सीधे तौर पर झलक वाले कोड को लागू करता है. इसके लिए, किसी एम्युलेटर या फ़िज़िकल डिवाइस को चलाने की ज़रूरत नहीं होती. इसकी वजह यह है कि यह Android फ़्रेमवर्क के पोर्ट किए गए हिस्से का इस्तेमाल करता है. इसे Layoutlib कहा जाता है. Layoutlib, Android फ़्रेमवर्क का एक कस्टम वर्शन है. इसे Android डिवाइसों के अलावा, अन्य डिवाइसों पर चलाने के लिए डिज़ाइन किया गया है. इस लाइब्रेरी का मकसद, Android Studio में लेआउट की झलक दिखाना है. यह झलक, डिवाइसों पर रेंडर होने वाले लेआउट से काफ़ी मिलती-जुलती होती है.

झलक देखने की सीमाएं

Android Studio में झलक रेंडर करने के तरीके की वजह से, ये झलकें हल्की होती हैं. साथ ही, इन्हें रेंडर करने के लिए पूरे Android फ़्रेमवर्क की ज़रूरत नहीं होती. हालांकि, इसमें ये सीमाएं हैं:

• नेटवर्क ऐक्सेस नहीं है
• फ़ाइल का ऐक्सेस नहीं है
• ऐसा हो सकता है कि कुछ Context एपीआई पूरी तरह से उपलब्ध न हों

झलक और ViewModels

किसी कंपोज़ेबल में ViewModel का इस्तेमाल करने पर, झलकें सीमित होती हैं. झलक दिखाने वाला सिस्टम, ViewModel को पास किए गए सभी पैरामीटर नहीं बना सकता. जैसे, रिपॉज़िटरी, इस्तेमाल के उदाहरण, मैनेजर वगैरह. इसके अलावा, अगर आपका ViewModel डिपेंडेंसी इंजेक्शन में हिस्सा लेता है (जैसे कि Hilt के साथ), तो झलक दिखाने वाला सिस्टम, ViewModel को बनाने के लिए पूरा डिपेंडेंसी ग्राफ़ नहीं बना सकता.

ViewModel का इस्तेमाल करके, किसी कंपोज़ेबल की झलक देखने की कोशिश करने पर, Android Studio उस कंपोज़ेबल को रेंडर करते समय गड़बड़ी दिखाता है:

चेतावनी: आपको ViewModel के इंस्टेंस को अन्य कंपोज़ेबल फ़ंक्शन में पास नहीं करना चाहिए. ऐसा करने पर, कंपोज़ेबल को ViewModel टाइप के साथ जोड़ा जाता है. इससे उन्हें फिर से इस्तेमाल करना मुश्किल हो जाता है, उनकी जांच करना मुश्किल हो जाता है, और उनकी झलक नहीं देखी जा सकती.

अगर आपको ViewModel का इस्तेमाल करने वाले किसी कंपोज़ेबल की झलक देखनी है, तो आपको एक और कंपोज़ेबल बनाना होगा. इसमें, ViewModel के पैरामीटर को कंपोज़ेबल के आर्ग्युमेंट के तौर पर पास करना होगा. इस तरह, आपको ViewModel का इस्तेमाल करने वाले कंपोज़ेबल की झलक देखने की ज़रूरत नहीं पड़ती.

@Composable
fun AuthorScreen(viewModel: AuthorViewModel = viewModel()) {
  AuthorScreen(
    name = viewModel.authorName,
    // ViewModel sends the network requests and makes posts available as a state
    posts = viewModel.posts
  )
}

@Composable
fun AuthorScreen(
  name: NameLabel,
  posts: PostsList
) {
  // ...
}

@Preview
@Composable
fun AuthorScreenPreview(
  // You can use some sample data to preview your composable without the need to construct the ViewModel
  name: String = sampleAuthor.name,
  posts: List<Post> = samplePosts[sampleAuthor]
) {
  AuthorScreen(
      name = NameLabel(name),
      posts = PostsList(posts)
  )
}

अन्य संसाधन

• Android Studio, @Preview को इस्तेमाल करने में आसान बनाने के लिए क्या करता है, इस बारे में ज़्यादा जानने के लिए, Compose टूल ब्लॉग पढ़ें. इसमें आपको टूल इस्तेमाल करने के बारे में ज़्यादा सलाह भी मिलेंगी.
• लेगसी व्यू के बारे में जानने के लिए, व्यू की मदद से लेआउट बनाना लेख पढ़ें.