কম্পোজেবল প্রিভিউ সহ আপনার UI এর পূর্বরূপ দেখুন

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

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

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

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

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

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

@Preview কম্পোজেবল ব্যবহারের অন্যতম প্রধান সুবিধা হলো অ্যান্ড্রয়েড স্টুডিওর এমুলেটরের উপর নির্ভরতা এড়ানো। এর ফলে আপনি চূড়ান্ত পর্যায়ের লুক-এন্ড-ফিল পরিবর্তনের জন্য এমুলেটরের মেমরি-নির্ভর স্টার্টআপের ঝামেলা এড়াতে পারেন এবং @Preview এর সাহায্যে সহজেই ছোটখাটো কোড পরিবর্তন করে তা পরীক্ষা করতে পারেন।

@Preview অ্যানোটেশন সবচেয়ে কার্যকরভাবে ব্যবহার করতে, আপনার স্ক্রিনগুলোকে তার ইনপুট হিসেবে প্রাপ্ত স্টেট এবং আউটপুট হিসেবে প্রদত্ত ইভেন্টের ভিত্তিতে সংজ্ঞায়িত করুন।

আপনার @Preview সংজ্ঞায়িত করুন

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

মাত্রা

ডিফল্টরূপে, @Preview এর কন্টেন্টকে ঘিরে রাখার জন্য এর ডাইমেনশনগুলো স্বয়ংক্রিয়ভাবে বেছে নেওয়া হয়। ডাইমেনশনগুলো ম্যানুয়ালি সেট করতে, heightDp এবং widthDp প্যারামিটারগুলো যোগ করুন। এই মানগুলো ইতিমধ্যেই dp হিসেবে গণ্য করা হয়, তাই এগুলোর সাথে .dp যোগ করার প্রয়োজন নেই।

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

গতিশীল রঙের প্রিভিউ

আপনার অ্যাপে ডাইনামিক কালার চালু করা থাকলে, ওয়ালপেপার পরিবর্তন করতে এবং বিভিন্ন ব্যবহারকারীর নির্বাচিত ওয়ালপেপারে আপনার UI কীভাবে প্রতিক্রিয়া দেখায় তা দেখতে wallpaper অ্যাট্রিবিউটটি ব্যবহার করুন। Wallpaper ক্লাস দ্বারা প্রদত্ত বিভিন্ন ওয়ালপেপার থিম থেকে নির্বাচন করুন। এই ফিচারটির জন্য Compose 1.4.0 বা তার উচ্চতর সংস্করণ প্রয়োজন।

বিভিন্ন ডিভাইসের সাথে ব্যবহার করুন

অ্যান্ড্রয়েড স্টুডিও ফ্লেমিঙ্গোতে, আপনি বিভিন্ন ডিভাইসে আপনার কম্পোজেবলগুলোর কনফিগারেশন নির্ধারণ করতে প্রিভিউ অ্যানোটেশনের device প্যারামিটারটি সম্পাদনা করতে পারেন।

যখন ডিভাইস প্যারামিটারে একটি খালি স্ট্রিং ( @Preview(device = "") ) থাকে, তখন আপনি Ctrl + Space চেপে অটোকমপ্লিট চালু করতে পারেন। এরপর, আপনি প্রতিটি প্যারামিটারের মান সেট করতে পারবেন।

অটোকমপ্লিট থেকে, আপনি তালিকা থেকে যেকোনো ডিভাইস অপশন বেছে নিতে পারেন—উদাহরণস্বরূপ, @Preview(device = "id:pixel_4") । বিকল্পভাবে, আপনি প্রতিটি প্যারামিটারের স্বতন্ত্র মান সেট করতে spec:width=px,height=px,dpi=int… বেছে নিয়ে একটি কাস্টম ডিভাইস প্রবেশ করাতে পারেন।

প্রয়োগ করতে Enter চাপুন, অথবা বাতিল করতে Esc চাপুন।

আপনি যদি একটি অবৈধ মান সেট করেন, তাহলে ডিক্লারেশনটির নিচে লাল রঙে দাগ দেওয়া হয় এবং একটি সমাধান উপলব্ধ থাকতে পারে ( Alt + Enter (macOS-এর জন্য ⌥ + ⏎) > Replace with … )। এই ইন্সপেকশনটি আপনার ইনপুটের সাথে সবচেয়ে সাদৃশ্যপূর্ণ একটি সমাধান দেওয়ার চেষ্টা করে।

অবস্থান

ব্যবহারকারীর বিভিন্ন লোকেল পরীক্ষা করতে, 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 সাথে ইন্টারঅ্যাক্ট করুন

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

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

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

কোড নেভিগেশন এবং রচনাযোগ্য রূপরেখা

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

প্রিভিউ চালান

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

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

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

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

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

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

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

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ সংস্করণে মাল্টিপ্রিভিউ এপিআই টেমপ্লেট হিসেবে @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 এবং বৃহৎ ডেটা সেট

প্রায়শই এমন প্রয়োজন দেখা দেয় যেখানে আপনাকে আপনার কম্পোজেবল প্রিভিউতে একটি বড় ডেটাসেট পাঠাতে হয়। এটি করার জন্য, @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 ব্যবহার করে প্রিভিউগুলোর নামকরণ ডিফল্টভাবে প্যারামিটার ইনডেক্স এবং প্রপার্টির নাম (যেমন user 0, user 1, user 2 ইত্যাদি) ব্যবহার করে করা হয়, যার ফলে সেগুলোকে আলাদা করে চেনা কঠিন হয়ে পড়ে। প্রিভিউয়ের স্বচ্ছতা বাড়াতে, আপনি আপনার 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 > Generate Preview for [Composable name] নির্বাচন করুন। এজেন্টটি আপনার কম্পোজেবল বিশ্লেষণ করে সঠিক প্যারামিটারসহ প্রয়োজনীয় @Preview বয়লারপ্লেট তৈরি করে, যা আপনার UI প্রত্যাশা অনুযায়ী রেন্ডার হচ্ছে কিনা তা দ্রুত যাচাই করতে আপনাকে সাহায্য করে।

অ্যানোটেশন ক্লাস @Preview

আপনার প্রিভিউ কাস্টমাইজ করার সময় যে প্যারামিটারগুলো পরিবর্তন করা যায়, তার সম্পূর্ণ তালিকা দেখতে আপনি অ্যান্ড্রয়েড স্টুডিওতে @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

সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন

অ্যান্ড্রয়েড স্টুডিও সরাসরি প্রিভিউ এরিয়াতে প্রিভিউ কোড এক্সিকিউট করে। এর জন্য কোনো এমুলেটর বা ফিজিক্যাল ডিভাইস চালানোর প্রয়োজন হয় না, কারণ এটি Layoutlib নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশ ব্যবহার করে। Layoutlib হলো অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ, যা অ্যান্ড্রয়েড ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা হয়েছে। এই লাইব্রেরির লক্ষ্য হলো অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের এমন প্রিভিউ প্রদান করা, যা ডিভাইসে এর রেন্ডারিংয়ের খুব কাছাকাছি হয়।

পূর্বরূপের সীমাবদ্ধতা

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

• নেটওয়ার্ক অ্যাক্সেস নেই
• ফাইল অ্যাক্সেস নেই
• কিছু Context এপিআই সম্পূর্ণরূপে উপলব্ধ নাও থাকতে পারে।

প্রিভিউ এবং ViewModels

একটি কম্পোজেবলের মধ্যে ViewModel ব্যবহার করার সময় প্রিভিউ সীমিত থাকে। প্রিভিউ সিস্টেম একটি ViewModel এ পাস করা সমস্ত প্যারামিটার, যেমন রিপোজিটরি, ইউজ কেস, ম্যানেজার বা অনুরূপ কিছু তৈরি করতে সক্ষম নয়। এছাড়াও, যদি আপনার ViewModel ডিপেন্ডেন্সি ইনজেকশনে (যেমন Hilt- এর সাথে) অংশ নেয়, তাহলে প্রিভিউ সিস্টেম 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)
  )
}

অতিরিক্ত সম্পদ

অ্যান্ড্রয়েড স্টুডিও কীভাবে @Preview ব্যবহার সহজ করে তোলে সে সম্পর্কে আরও জানতে এবং টুলিং টিপস শিখতে, Compose Tooling ব্লগটি দেখুন।