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

একটি কম্পোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @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 অ্যানোটেশন যোগ করতে পারেন যাতে বিভিন্ন প্রপার্টি সহ কম্পোজেবল প্রিভিউ করা যায়।

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

@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 অ্যানোটেশনে (যেমন, widthDp, locale ইত্যাদি) প্রয়োগ করা আর্গুমেন্ট, রান ও ডিপ্লয় করা প্রিভিউতে প্রয়োগ করা হয় না।

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

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

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

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

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

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

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ ভার্সনে মাল্টিপ্রিভিউ API টেমপ্লেট নিয়ে আসা হয়েছে: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, এবং @PreviewDynamicColors, যাতে একটিমাত্র অ্যানোটেশন ব্যবহার করে, আপনি সাধারণ পরিস্থিতিতে আপনার কম্পোজ 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 এবং অনেক বড় ডেটা সেট

Very often, a need arises where you must pass a large dataset to your composable preview. এটি করতে, @PreviewParameter অ্যানোটেশন সহ প্যারামিটার যোগ করে, Composable প্রিভিউ ফাংশনে স্যাম্পেল ডেটা পাস করুন।

@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 ব্যবহার করে প্রিভিউয়ের নাম ডিফল্ট হিসেবে প্যারামিটার ইনডেক্স ও প্রপার্টির নাম (ব্যবহারকারী ০, ব্যবহারকারী ১, ব্যবহারকারী ২ ইত্যাদি) ব্যবহার করে রাখা হয়, যার ফলে সেগুলি আলাদা করে চেনা কঠিন হতে পারে। প্রিভিউ আরও স্পষ্ট করতে, আপনি 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

পরামর্শ: আরও ভালো পারফর্ম্যান্সের জন্য, PreviewParameterProvider-এ List-এর সাথে আপনার Sequence-এর ব্যাক-আপ নিন। এটি getDisplayName()-এ দক্ষ, ইন্ডেক্স-ভিত্তিক অ্যাক্সেস প্রদান করে এবং বড় সিকোয়েন্সে ধীরগতির লুকআপ এড়ায়।

AI-সহায়তায় প্রিভিউ জেনারেশন

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

AI ব্যবহার করে কম্পোজ প্রিভিউ জেনারেট করুন।

অ্যানোটেশন ক্লাস @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 সরাসরি প্রিভিউ এরিয়াতে প্রিভিউ কোড এক্সিকিউট করে। এটির জন্য এমুলেটর বা ফিজিক্যাল ডিভাইস চালানোর প্রয়োজন হয় না, কারণ এটি Layoutlib নামক Android ফ্রেমওয়ার্কের পোর্ট করা অংশ ব্যবহার করে। Layoutlib হল Android ফ্রেমওয়ার্কের একটি কাস্টম ভার্সন যা Android ডিভাইসের বাইরে রান করার জন্য ডিজাইন করা হয়েছে। লাইব্রেরির লক্ষ্য হল Android Studio-তে লেআউটের প্রিভিউ প্রদান করা যা ডিভাইসে রেন্ডারিংয়ের খুব কাছাকাছি।

প্রিভিউ সংক্রান্ত সীমাবদ্ধতা

Android Studio-তে প্রিভিউ যেভাবে রেন্ডার করা হয়, তার জন্য সেগুলি হালকা হয় এবং রেন্ডার করার জন্য সম্পূর্ণ Android ফ্রেমওয়ার্কের প্রয়োজন হয় না। তবে, এর সাথে নিম্নলিখিত সীমাবদ্ধতাগুলিও রয়েছে:

• নেটওয়ার্ক অ্যাক্সেস নেই
• ফাইল অ্যাক্সেস নেই
• কিছু Context API সম্পূর্ণভাবে উপলভ্য নাও হতে পারে

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