কম্পোজ করা যায় এমন প্রিভিউয়ের মাধ্যমে আপনার UI-এর প্রিভিউ দেখা

কম্পোজেবলকে একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable দিয়ে অ্যানোটেট করা হয়:

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

এই কম্পোজ করার উপযুক্ত আইটেমের প্রিভিউ চালু করতে, @Composable ও @Preview দিয়ে অ্যানোটেশন করা আরেকটি কম্পোজ করার উপযুক্ত আইটেম তৈরি করুন। এই নতুন, অ্যানোটেটেড কম্পোজেবলে এখন আপনার প্রাথমিকভাবে তৈরি করা কম্পোজেবল, SimpleComposable রয়েছে:

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

@Preview অ্যানোটেশন Android Studio-কে জানায় যে এই কম্পোজ করার উপযুক্ত আইটেমটি এই ফাইলের ডিজাইন ভিউতে দেখাতে হবে। আপনি এডিট করার সাথে সাথে কম্পোজ করা যায় এমন প্রিভিউতে লাইভ আপডেট দেখতে পাবেন।

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 অ্যাট্রিবিউট ব্যবহার করুন এবং দেখুন যে আপনার UI কীভাবে বিভিন্ন ব্যবহারকারীর বেছে নেওয়া ওয়ালপেপারে প্রতিক্রিয়া জানায়। ক্লাসে 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

সিস্টেম UI

প্রিভিউয়ের মধ্যে স্ট্যাটাস ও অ্যাকশন বার দেখাতে চাইলে, showSystemUi প্যারামিটার যোগ করুন:

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

UI মোড

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 এমন ফিচার প্রদান করে যা আপনাকে নিজের সংজ্ঞায়িত প্রিভিউয়ের সাথে ইন্টার‍্যাক্ট করতে দেয়। এই ইন্টার‍্যাকশন আপনাকে প্রিভিউয়ের রানটাইম আচরণ বুঝতে এবং প্রিভিউয়ের মাধ্যমে UI আরও ভালোভাবে নেভিগেট করতে সাহায্য করে।

ইন্টার‍্যাক্টিভ মোড

ইন্টার‍্যাক্টিভ মোড আপনাকে প্রিভিউয়ের সাথে সেইভাবেই ইন্টার‍্যাক্ট করতে দেয় যেভাবে আপনি ফোন বা ট্যাবলেটের মতো আপনার প্রোগ্রাম রান করা ডিভাইসে করেন। ইন্টারেক্টিভ মোড একটি স্যান্ডবক্স এনভায়রনমেন্টে আইসোলেট করা হয় (অর্থাৎ, অন্যান্য প্রিভিউ থেকে আইসোলেট করা হয়), যেখানে আপনি এলিমেন্টে ক্লিক করতে এবং প্রিভিউতে ব্যবহারকারীর ইনপুট লিখতে পারবেন। আপনার কম্পোজ করার উপযুক্ত আইটেমের বিভিন্ন স্টেট, জেসচার এবং এমনকি অ্যানিমেশন পরীক্ষা করার এটি একটি দ্রুত উপায়।

কোড নেভিগেশন ও কম্পোজ করা যায় এমন আউটলাইন

প্রিভিউয়ের উপর মাউস নিয়ে গেলে, এর মধ্যে থাকা কম্পোজ করার উপযুক্ত আইটেমের আউটলাইন দেখতে পাবেন। কম্পোজ করা যায় এমন আউটলাইনে ক্লিক করলে, আপনার এডিটর ভিউ ট্রিগার হয় এবং সেটি এর ডেফিনিশনে নেভিগেট করে।

প্রিভিউ রান করা

আপনি এমুলেটর বা ফিজিক্যাল ডিভাইসে নির্দিষ্ট @Preview রান করতে পারবেন। প্রিভিউটি নতুন Activity হিসেবে একই প্রোজেক্ট অ্যাপের মধ্যে ডেপ্লয় করা হয়, তাই এটি একই কনটেক্সট ও অনুমতি শেয়ার করে। এর জন্য আপনাকে অনুমতি চাওয়া বয়লারপ্লেট কোড লিখতে হবে না, যদি সেটি আগেই মঞ্জুর করা হয়ে থাকে।

প্রিভিউ চালান আইকনে ক্লিক করুন যা @Preview অ্যানোটেশনের পাশে বা প্রিভিউয়ের উপরে থাকে এবং Android Studio আপনার কানেক্ট করা ডিভাইস বা এমুলেটরে সেটি @Preview ডেপ্লয় করে।

কপি @Preview রেন্ডার

প্রতিটি রেন্ডার করা প্রিভিউতে ডানদিকের বোতামে ক্লিক করে সেটি ছবি হিসেবে কপি করা যাবে।

একই @Preview অ্যানোটেশনের একাধিক প্রিভিউ

আপনি একই @Previewকম্পোজ করার উপযুক্ত আইটেমের একাধিক ভার্সন দেখাতে পারেন, যেগুলির স্পেসিফিকেশন আলাদা অথবা কম্পোজ করার উপযুক্ত আইটেমে আলাদা আলাদা প্যারামিটার পাস করা হয়েছে। এই ভাবে, আপনি বয়লারপ্লেট কোড কমানোর সুবিধা পাবেন, অন্যথায় আপনাকে এটি লিখতে হত।

মাল্টিপ্রিভিউ টেমপ্লেট

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ Multipreview API টেমপ্লেট নিয়ে আসে: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, এবং @PreviewDynamicColors, যাতে একটিমাত্র অ্যানোটেশন দিয়ে আপনি সাধারণ পরিস্থিতিতে আপনার Compose UI প্রিভিউ করতে পারেন।

কাস্টম মাল্টিপ্রিভিউ অ্যানোটেশন তৈরি করা

মাল্টিপ্রিভিউয়ের মাধ্যমে, আপনি এমন একটি অ্যানোটেশন ক্লাস নির্ধারণ করতে পারবেন যার মধ্যে একাধিক @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

এটি সিকোয়েন্সে থাকা প্রতিটি ডেটা এলিমেন্টের জন্য একটি করে প্রিভিউ রেন্ডার করে:

আপনি একাধিক প্রিভিউয়ের জন্য একই প্রদানকারী ক্লাস ব্যবহার করতে পারবেন। প্রয়োজন হলে, limit প্যারামিটার সেট করে প্রিভিউয়ের সংখ্যা সীমিত করুন।

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

@PreviewParameter ব্যবহার করে তৈরি করা প্রিভিউয়ের নাম ডিফল্ট হিসেবে প্যারামিটার ইনডেক্স ও প্রপার্টির নাম (ব্যবহারকারী ০, ব্যবহারকারী ১, ব্যবহারকারী ২ ইত্যাদি) ব্যবহার করে রাখা হয়, এর ফলে সেগুলিকে আলাদা করে চিনে নেওয়া কঠিন হয়ে পড়ে। প্রিভিউয়ের স্পষ্টতা বাড়াতে, আপনার PreviewParameterProvider-এ getDisplayName() ওভাররাইড করে প্রতিটি প্রিভিউয়ের জন্য কাস্টম ডিসপ্লে নাম দিতে পারেন। এটি বিভিন্ন ডেটা ভেরিয়েশন বা UI স্টেটের মধ্যে পার্থক্য করতে সাহায্য করে। যেমন, আপনি ইনপুট ডেটার উপর ভিত্তি করে প্রিভিউ লেবেল করতে পারেন:

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

AI-এর সাহায্যে প্রিভিউ তৈরি করা

Android Studio-তে AI এজেন্ট আপনার কম্পোজ করার উপযুক্ত আইটেমের জন্য অটোমেটিক Compose প্রিভিউ তৈরি করতে পারে। Composable ফাংশনে ডানদিকের বোতামে ক্লিক করে AI > [Composable name]-এর জন্য প্রিভিউ জেনারেট করো বিকল্প বেছে নিন। আপনার কম্পোজ করার উপযুক্ত আইটেম বিশ্লেষণ করে প্রয়োজনীয় @Preview বয়লারপ্লেট সঠিক প্যারামিটার সহ জেনারেট করে, এর ফলে আপনার UI প্রত্যাশা অনুযায়ী রেন্ডার হচ্ছে কিনা তা দ্রুত যাচাই করতে সাহায্য করে।

অ্যানোটেশন ক্লাস @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 API সম্পূর্ণভাবে উপলভ্য নাও থাকতে পারে

প্রিভিউ ও ViewModels

কম্পোজ করার উপযুক্ত আইটেমের মধ্যে ViewModel ব্যবহার করলে প্রিভিউ সীমিত হয়ে যায়। প্রিভিউ সিস্টেম ViewModel-এ পাস করা সব প্যারামিটার তৈরি করতে পারে না, যেমন, রেপোজিটরি, ইউজ কেস, ম্যানেজার, বা এই ধরনের কিছু। এছাড়াও, আপনার ViewModel যদি ডিপেন্ডেন্সি ইনজেকশনে (যেমন, Hilt-এর সাথে) অংশগ্রহণ করে, তাহলে প্রিভিউ সিস্টেম ViewModel তৈরি করার জন্য সম্পূর্ণ ডিপেন্ডেন্সি গ্রাফ তৈরি করতে পারবে না।

আপনি যখন ViewModel-এর মাধ্যমে কোনও কম্পোজ করার মতো আইটেমের প্রিভিউ দেখার চেষ্টা করেন, তখন Android Studio সেই নির্দিষ্ট কম্পোজ করার মতো আইটেম রেন্ডার করার সময় একটি সমস্যা দেখায়:

আপনি যদি 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 Tooling ব্লগটি দেখুন।
• পুরনো Views সংক্রান্ত নির্দেশিকার জন্য, Views-এর সাহায্যে লেআউট ডেভেলপ করা দেখুন।