پیش نمایش UI خود را با پیش نمایش های قابل ترکیب

یک composable توسط یک تابع تعریف می شود و با @Composable حاشیه نویسی می شود:

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

برای فعال کردن یک پیش‌نمایش از این composable، یک Composable دیگر ایجاد کنید که با @Composable و @Preview حاشیه‌نویسی شده است. این قابلیت ترکیب‌بندی جدید و حاشیه‌نویسی اکنون حاوی قابلیتی است که در ابتدا ایجاد کردید، SimpleComposable :

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

حاشیه‌نویسی @Preview به اندروید استودیو می‌گوید که این قابل ترکیب باید در نمای طراحی این فایل نشان داده شود. در حین انجام ویرایش‌های خود، می‌توانید به‌روزرسانی‌های زنده پیش‌نمایش قابل ترکیب خود را مشاهده کنید.

توجه: Android Wear از حاشیه نویسی های مختلفی برای پیش نمایش استفاده می کند ( @WearPreviewDevices و @WearPreviewFontScales )؛ برای اطلاعات بیشتر به آزمایش ترکیب اندازه های صفحه و فونت با استفاده از پیش نمایش ها مراجعه کنید.

می‌توانید پارامترها را به صورت دستی در کد خود اضافه کنید تا نحوه نمایش @Preview را Android Studio سفارشی کنید. حتی می‌توانید حاشیه‌نویسی @Preview را چندین بار به یک تابع اضافه کنید تا پیش‌نمایش یک composable با ویژگی‌های مختلف را مشاهده کنید.

توجه: اگر چندین پیش‌نمایش قابل ترکیب دارید اما می‌خواهید در یک زمان روی یک پیش‌نمایش تمرکز کنید، توصیه می‌کنیم از حالت فوکوس برای ذخیره منابع رندر استفاده کنید. زمانی که نیاز دارید همه انواع رابط کاربری را همزمان ببینید، به حالت Grid یا List بروید. می‌توانید با استفاده از منوی بالای برگه طراحی ، بین حالت‌ها جابجا شوید.

یکی از مزایای اصلی استفاده از @Preview composables اجتناب از اتکا به شبیه ساز در 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) > Replace with… . Inspection سعی می‌کند اصلاحی ارائه کند که شبیه ورودی شما باشد.

محلی

برای آزمایش زبان های مختلف کاربر، پارامتر locale را اضافه کنید:

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

تنظیم رنگ پس زمینه

به طور پیش فرض، composable شما با پس زمینه شفاف نمایش داده می شود. برای افزودن پس‌زمینه، پارامترهای 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 بخوانید تا ببینید آیا composable در یک پیش‌نمایش (در داخل یک مؤلفه قابل بازرسی ) ارائه می‌شود یا خیر. اگر ترکیب در یک پیش نمایش ارائه شود، 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 composable را با مشخصات مختلف، یا پارامترهای متفاوتی که به composable ارسال شده است، به نمایش بگذارید. به این ترتیب، می توانید کد دیگ بخار را که در غیر این صورت باید بنویسید، کاهش دهید.

قالب های چند پیش نمایش

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ الگوهای API Multipreview را معرفی می‌کند: @PreviewScreenSizes ، @PreviewFontScales ، @PreviewLightDark و @PreviewDynamicColors ، به طوری که با یک پیش‌نمایش مشترک، می‌توانید یک پیش‌نمایش را با یک رابط کاربری ساده مقایسه کنید.

حاشیه نویسی های چند پیش نمایش سفارشی ایجاد کنید

با چند پیش نمایش، می توانید یک کلاس حاشیه نویسی تعریف کنید که خود دارای چندین حاشیه نویسی @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

می‌توانید از این حاشیه‌نویسی سفارشی برای پیش‌نمایش‌های composable خود استفاده کنید:

@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 به تابع Composable Preview ارسال کنید.

@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

محدودیت ها و بهترین شیوه ها

Android Studio کد پیش‌نمایش را مستقیماً در قسمت پیش‌نمایش اجرا می‌کند. نیازی به اجرای شبیه‌ساز یا دستگاه فیزیکی ندارد زیرا از بخش پورت‌شده چارچوب اندروید به نام Layoutlib استفاده می‌کند. Layoutlib یک نسخه سفارشی از چارچوب اندروید است که برای اجرا در خارج از دستگاه های اندرویدی طراحی شده است. هدف این کتابخانه ارائه پیش نمایشی از یک طرح بندی در اندروید استودیو است که به رندر آن در دستگاه ها بسیار نزدیک است.

پیش نمایش محدودیت ها

به دلیل نحوه ارائه پیش‌نمایش‌ها در اندروید استودیو، سبک وزن هستند و برای رندر کردن آن‌ها به کل چارچوب اندروید نیاز ندارند. با این حال، این با محدودیت های زیر همراه است:

• بدون دسترسی به شبکه
• دسترسی به فایل وجود ندارد
• برخی از Context API ممکن است به طور کامل در دسترس نباشند

پیش نمایش ها و ViewModels

هنگام استفاده از ViewModel در یک Composable، پیش‌نمایش‌ها محدود می‌شوند. سیستم پیش نمایش قادر به ساخت تمام پارامترهای ارسال شده به ViewModel نیست، مانند مخازن، موارد استفاده، مدیران یا موارد مشابه. همچنین، اگر ViewModel شما در تزریق وابستگی شرکت کند (مانند Hilt )، سیستم پیش‌نمایش نمی‌تواند کل نمودار وابستگی را برای ساخت ViewModel بسازد.

هنگامی که می‌خواهید پیش‌نمایش یک composable را با ViewModel مشاهده کنید، Android Studio خطایی را هنگام رندر کردن یک composable خاص نشان می‌دهد:

هشدار: شما نباید نمونه های ViewModel را به سایر توابع قابل ترکیب منتقل کنید. وقتی این کار را انجام می‌دهید، Composable‌ها را با نوع ViewModel جفت می‌کنید، که باعث می‌شود کمتر قابل استفاده مجدد باشند، آزمایش آن‌ها سخت‌تر باشد و پیش‌نمایش آن‌ها ناتوان باشد.

اگر می‌خواهید یک Composable را پیش‌نمایش کنید که از ViewModel استفاده می‌کند، باید composable دیگری با پارامترهای ViewModel به عنوان آرگومان‌های composable ارسال کنید. به این ترتیب، نیازی به پیش نمایش composable که از 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
  )
}

@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

همیشه می‌توانید روی حاشیه‌نویسی @Preview در Android Studio «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 سهولت استفاده @Preview را ترویج می‌کند و نکات بیشتر Tooling را بدانید، وبلاگ Compose Tooling را بررسی کنید.

{% کلمه به کلمه %} {% endverbatim %}،

یک composable توسط یک تابع تعریف می شود و با @Composable حاشیه نویسی می شود:

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

برای فعال کردن یک پیش‌نمایش از این composable، یک Composable دیگر ایجاد کنید که با @Composable و @Preview حاشیه‌نویسی شده است. این قابلیت ترکیب‌بندی جدید و حاشیه‌نویسی اکنون حاوی قابلیتی است که در ابتدا ایجاد کردید، SimpleComposable :

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

حاشیه‌نویسی @Preview به اندروید استودیو می‌گوید که این قابل ترکیب باید در نمای طراحی این فایل نشان داده شود. در حین انجام ویرایش‌های خود، می‌توانید به‌روزرسانی‌های زنده پیش‌نمایش قابل ترکیب خود را مشاهده کنید.

توجه: Android Wear از حاشیه نویسی های مختلفی برای پیش نمایش استفاده می کند ( @WearPreviewDevices و @WearPreviewFontScales )؛ برای اطلاعات بیشتر به آزمایش ترکیب اندازه های صفحه و فونت با استفاده از پیش نمایش ها مراجعه کنید.

می‌توانید پارامترها را به صورت دستی در کد خود اضافه کنید تا نحوه نمایش @Preview را Android Studio سفارشی کنید. حتی می‌توانید حاشیه‌نویسی @Preview را چندین بار به یک تابع اضافه کنید تا پیش‌نمایش یک composable با ویژگی‌های مختلف را مشاهده کنید.

توجه: اگر چندین پیش‌نمایش قابل ترکیب دارید اما می‌خواهید در یک زمان روی یک پیش‌نمایش تمرکز کنید، توصیه می‌کنیم از حالت فوکوس برای ذخیره منابع رندر استفاده کنید. زمانی که نیاز دارید همه انواع رابط کاربری را همزمان ببینید، به حالت Grid یا List بروید. می‌توانید با استفاده از منوی بالای برگه طراحی ، بین حالت‌ها جابجا شوید.

یکی از مزایای اصلی استفاده از @Preview composables اجتناب از اتکا به شبیه ساز در 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) > Replace with… . Inspection سعی می‌کند اصلاحی ارائه کند که شبیه ورودی شما باشد.

محلی

برای آزمایش زبان های مختلف کاربر، پارامتر locale را اضافه کنید:

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

تنظیم رنگ پس زمینه

به طور پیش فرض، composable شما با پس زمینه شفاف نمایش داده می شود. برای افزودن پس‌زمینه، پارامترهای 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 بخوانید تا ببینید آیا composable در یک پیش‌نمایش (در داخل یک مؤلفه قابل بازرسی ) ارائه می‌شود یا خیر. اگر ترکیب در یک پیش نمایش ارائه شود، 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 composable را با مشخصات مختلف، یا پارامترهای متفاوتی که به composable ارسال شده است، به نمایش بگذارید. به این ترتیب، می توانید کد دیگ بخار را که در غیر این صورت باید بنویسید، کاهش دهید.

قالب های چند پیش نمایش

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ الگوهای API Multipreview را معرفی می‌کند: @PreviewScreenSizes ، @PreviewFontScales ، @PreviewLightDark و @PreviewDynamicColors ، به طوری که با یک پیش‌نمایش مشترک، می‌توانید یک پیش‌نمایش را با یک رابط کاربری ساده مقایسه کنید.

حاشیه نویسی های چند پیش نمایش سفارشی ایجاد کنید

با چند پیش نمایش، می توانید یک کلاس حاشیه نویسی تعریف کنید که خود دارای چندین حاشیه نویسی @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

می‌توانید از این حاشیه‌نویسی سفارشی برای پیش‌نمایش‌های composable خود استفاده کنید:

@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 به تابع Composable Preview ارسال کنید.

@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

محدودیت ها و بهترین شیوه ها

Android Studio کد پیش‌نمایش را مستقیماً در قسمت پیش‌نمایش اجرا می‌کند. نیازی به اجرای شبیه‌ساز یا دستگاه فیزیکی ندارد زیرا از بخش پورت‌شده چارچوب اندروید به نام Layoutlib استفاده می‌کند. Layoutlib یک نسخه سفارشی از چارچوب اندروید است که برای اجرا در خارج از دستگاه های اندرویدی طراحی شده است. هدف این کتابخانه ارائه پیش نمایشی از یک طرح بندی در اندروید استودیو است که به رندر آن در دستگاه ها بسیار نزدیک است.

پیش نمایش محدودیت ها

به دلیل نحوه ارائه پیش‌نمایش‌ها در اندروید استودیو، سبک وزن هستند و برای رندر کردن آن‌ها به کل چارچوب اندروید نیاز ندارند. با این حال، این با محدودیت های زیر همراه است:

• بدون دسترسی به شبکه
• دسترسی به فایل وجود ندارد
• برخی از Context API ممکن است به طور کامل در دسترس نباشند

پیش نمایش ها و ViewModels

هنگام استفاده از ViewModel در یک Composable، پیش‌نمایش‌ها محدود می‌شوند. سیستم پیش نمایش قادر به ساخت تمام پارامترهای ارسال شده به ViewModel نیست، مانند مخازن، موارد استفاده، مدیران یا موارد مشابه. همچنین، اگر ViewModel شما در تزریق وابستگی شرکت کند (مانند Hilt )، سیستم پیش‌نمایش نمی‌تواند کل نمودار وابستگی را برای ساخت ViewModel بسازد.

هنگامی که می‌خواهید پیش‌نمایش یک composable را با ViewModel مشاهده کنید، Android Studio خطایی را هنگام رندر کردن یک composable خاص نشان می‌دهد:

هشدار: شما نباید نمونه های ViewModel را به سایر توابع قابل ترکیب منتقل کنید. وقتی این کار را انجام می‌دهید، Composable‌ها را با نوع ViewModel جفت می‌کنید، که باعث می‌شود کمتر قابل استفاده مجدد باشند، آزمایش آن‌ها سخت‌تر باشد و پیش‌نمایش آن‌ها ناتوان باشد.

اگر می‌خواهید یک Composable را پیش‌نمایش کنید که از ViewModel استفاده می‌کند، باید composable دیگری با پارامترهای ViewModel به عنوان آرگومان‌های composable ارسال کنید. به این ترتیب، نیازی به پیش نمایش composable که از 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
  )
}

@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

همیشه می‌توانید روی حاشیه‌نویسی @Preview در Android Studio «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 سهولت استفاده @Preview را ترویج می‌کند و نکات بیشتر Tooling را بدانید، وبلاگ Compose Tooling را بررسی کنید.

{% کلمه به کلمه %} {% endverbatim %}،

یک composable توسط یک تابع تعریف می شود و با @Composable حاشیه نویسی می شود:

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

برای فعال کردن یک پیش‌نمایش از این composable، یک Composable دیگر ایجاد کنید که با @Composable و @Preview حاشیه‌نویسی شده است. این قابلیت ترکیب‌بندی جدید و حاشیه‌نویسی اکنون حاوی قابلیتی است که در ابتدا ایجاد کردید، SimpleComposable :

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

حاشیه‌نویسی @Preview به اندروید استودیو می‌گوید که این قابل ترکیب باید در نمای طراحی این فایل نشان داده شود. در حین انجام ویرایش‌های خود، می‌توانید به‌روزرسانی‌های زنده پیش‌نمایش قابل ترکیب خود را مشاهده کنید.

توجه: Android Wear از حاشیه نویسی های مختلفی برای پیش نمایش استفاده می کند ( @WearPreviewDevices و @WearPreviewFontScales )؛ برای اطلاعات بیشتر به آزمایش ترکیب اندازه های صفحه و فونت با استفاده از پیش نمایش ها مراجعه کنید.

می‌توانید پارامترها را به صورت دستی در کد خود اضافه کنید تا نحوه نمایش @Preview را Android Studio سفارشی کنید. حتی می‌توانید حاشیه‌نویسی @Preview را چندین بار به یک تابع اضافه کنید تا پیش‌نمایش یک composable با ویژگی‌های مختلف را مشاهده کنید.

توجه: اگر چندین پیش‌نمایش قابل ترکیب دارید اما می‌خواهید در یک زمان روی یک پیش‌نمایش تمرکز کنید، توصیه می‌کنیم از حالت فوکوس برای ذخیره منابع رندر استفاده کنید. زمانی که نیاز دارید همه انواع رابط کاربری را همزمان ببینید، به حالت Grid یا List بروید. می‌توانید با استفاده از منوی بالای برگه طراحی ، بین حالت‌ها جابجا شوید.

یکی از مزایای اصلی استفاده از @Preview composables اجتناب از اتکا به شبیه ساز در 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) > Replace with… . Inspection سعی می‌کند اصلاحی ارائه کند که شبیه ورودی شما باشد.

محلی

برای آزمایش زبان های مختلف کاربر، پارامتر locale را اضافه کنید:

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

تنظیم رنگ پس زمینه

به طور پیش فرض، composable شما با پس زمینه شفاف نمایش داده می شود. برای افزودن پس‌زمینه، پارامترهای 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 بخوانید تا ببینید آیا composable در یک پیش‌نمایش (در داخل یک مؤلفه قابل بازرسی ) ارائه می‌شود یا خیر. اگر ترکیب در یک پیش نمایش ارائه شود، 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 composable را با مشخصات مختلف، یا پارامترهای متفاوتی که به composable ارسال شده است، به نمایش بگذارید. به این ترتیب، می توانید کد دیگ بخار را که در غیر این صورت باید بنویسید، کاهش دهید.

قالب های چند پیش نمایش

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ الگوهای API Multipreview را معرفی می‌کند: @PreviewScreenSizes ، @PreviewFontScales ، @PreviewLightDark و @PreviewDynamicColors ، به طوری که با یک پیش‌نمایش مشترک، می‌توانید یک پیش‌نمایش را با یک رابط کاربری ساده مقایسه کنید.

حاشیه نویسی های چند پیش نمایش سفارشی ایجاد کنید

با چند پیش نمایش، می توانید یک کلاس حاشیه نویسی تعریف کنید که خود دارای چندین حاشیه نویسی @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

می‌توانید از این حاشیه‌نویسی سفارشی برای پیش‌نمایش‌های composable خود استفاده کنید:

@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

محدودیت ها و بهترین شیوه ها

Android Studio کد پیش نمایش را مستقیماً در منطقه پیش نمایش اجرا می کند. نیازی به اجرای یک شبیه ساز یا دستگاه فیزیکی ندارد زیرا از قسمت منتقل شده از چارچوب Android به نام Layoutlib استفاده می کند. Layoutlib یک نسخه سفارشی از Framework Android است که برای اجرای خارج از دستگاه های Android طراحی شده است. هدف این کتابخانه ارائه پیش نمایش طرح در استودیوی اندرویدی است که بسیار نزدیک به ارائه آن در دستگاه ها است.

محدودیت ها پیش نمایش

به دلیل شیوه ارائه پیش نمایش در Android Studio ، آنها سبک وزن هستند و نیازی به کل چارچوب Android برای ارائه آنها ندارند. با این حال ، این با محدودیت های زیر همراه است:

• بدون دسترسی به شبکه
• بدون دسترسی به پرونده
• برخی از API های Context ممکن است کاملاً در دسترس نباشند

پیش نمایش ها و ViewModels

پیش نمایش ها هنگام استفاده از ViewModel در یک ترکیب محدود هستند. سیستم پیش نمایش قادر به ساخت کلیه پارامترهای منتقل شده به یک ViewModel مانند مخازن ، موارد استفاده ، مدیران یا موارد مشابه نیست. همچنین ، اگر ViewModel شما در تزریق وابستگی (مانند HILT ) شرکت می کند ، سیستم Previews نمی تواند کل نمودار وابستگی را برای ساخت ViewModel بسازد.

هنگامی که سعی می کنید یک ترکیب را با ViewModel پیش نمایش دهید ، Android Studio هنگام ارائه آهنگ سازی خاص خطایی را نشان می دهد:

هشدار: شما نباید نمونه های ViewModel را به سایر توابع سازنده منتقل کنید. هنگامی که این کار را انجام می دهید ، ترکیبات را با نوع ViewModel جفت می کنید ، که باعث می شود آنها کمتر قابل استفاده مجدد ، آزمایش سخت تر و قادر به پیش نمایش نباشند.

اگر می خواهید یک ترکیب قابل استفاده را که از ViewModel استفاده می کند ، پیش نمایش کنید ، باید با پارامترهای ViewModel که به عنوان آرگومان های Composable منتقل شده است ، ترکیب دیگری را ایجاد کنید. به این ترتیب ، نیازی به پیش نمایش ترکیب قابل استفاده از 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
  )
}

@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

شما همیشه می توانید برای لیست کامل پارامترهایی که می توانند هنگام شخصی @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 @Preview سهولت استفاده ، و نکات بیشتر ابزار ابزار را بیاموزید ، از ابزار Compose Compose استفاده کنید.

{% کلمه به کلمه %} {% endverbatim %}،

یک ترکیب توسط یک تابع تعریف شده و با @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 @Preview را سفارشی کنید. حتی می توانید حاشیه نویسی @Preview را چندین بار به همان عملکرد اضافه کنید تا پیش نمایش یک ترکیب با خصوصیات مختلف را پیش نمایش کنید.

توجه: اگر چندین پیش نمایش آهنگساز دارید اما می خواهید به طور همزمان روی یک پیش نمایش تمرکز کنید ، توصیه می کنیم از حالت فوکوس برای صرفه جویی در منابع رندر استفاده کنید. هنگامی که نیاز به دیدن همه انواع UI به طور همزمان دارید ، به حالت Grid یا List بروید. می توانید با استفاده از منو در بالای برگه طراحی ، بین حالت ها جابجا شوید.

یکی از اصلی ترین مزایای استفاده از Composables @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 انتخاب کنید. این ویژگی نیاز به آهنگسازی 1.4.0 یا بالاتر دارد.

با دستگاه های مختلف استفاده کنید

در Android Studio Flamingo ، می توانید پارامتر device حاشیه نویسی پیش نمایش را ویرایش کنید تا پیکربندی های آهنگسازان خود را در دستگاه های مختلف تعریف کنید.

هنگامی که پارامتر دستگاه دارای یک رشته خالی ( @Preview(device = "") ) است ، می توانید با فشار دادن Ctrl + Space ، به صورت خودکار استفاده کنید. سپس می توانید مقادیر هر پارامتر را تنظیم کنید.

از AutoClotte ، می توانید هر گزینه دستگاه را از لیست - به عنوان مثال ، @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

حالت UI

پارامتر uiMode می تواند هر یک از Configuration.UI_* را انجام دهد. به عنوان مثال ، می توانید پیش نمایش را روی حالت شب تنظیم کنید تا ببینید که چگونه موضوع واکنش نشان می دهد.

LocalInspectionMode

شما می توانید از CompositionLocal LocalInspectionMode بخوانید تا ببینید که آیا این ترکیب در یک پیش نمایش (در داخل یک مؤلفه قابل بازرسی ) ارائه می شود. اگر ترکیب در یک پیش نمایش ارائه شود ، 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 جدید مستقر می شود ، بنابراین همان زمینه و مجوزها را به اشتراک می گذارد. نیازی به نوشتن کد BoilerPlate نیست که درخواست مجوز در صورت اعطای آن را داشته باشد.

توجه: آرگومان های اعمال شده برای حاشیه نویسی @Preview (به عنوان مثال ، widthDp ، locale و غیره) برای پیش نمایش اجرا شده و مستقر اعمال نمی شود.

روی نماد Run Preview کلیک کنید در کنار حاشیه نویسی @Preview یا در بالای پیش نمایش ، و Android Studio که @Preview به دستگاه یا شبیه ساز متصل شما مستقر می کند.

کپی کردن @Preview RENDER

هر پیش نمایش ارائه شده را می توان با کلیک راست روی آن به عنوان یک تصویر کپی کرد.

پیش نمایش های متعدد از همان حاشیه @Preview Preview

شما می توانید چندین نسخه از همان Composible @Preview را با مشخصات مختلف به نمایش بگذارید ، یا پارامترهای مختلف منتقل شده به Composable. به این ترتیب ، می توانید کد دیگ بخار را که لازم است در غیر این صورت بنویسید ، کاهش دهید.

الگوهای چند منظوره

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ الگوهای API Multipreview را معرفی می کند: @PreviewScreenSizes : @PreviewFontScales ، @PreviewLightDark ، و @PreviewDynamicColors ، به طوری که با یک حاشیه نویسی واحد می توانید در زمینه سنبله خود استفاده کنید.

حاشیه نویسی های چند منظوره سفارشی ایجاد کنید

با MultipreView ، می توانید یک کلاس حاشیه نویسی را تعریف کنید که خود دارای چندین حاشیه نویسی @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

شما می توانید از این حاشیه نویسی سفارشی برای Composables Preview خود استفاده کنید:

@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

محدودیت ها و بهترین شیوه ها

Android Studio کد پیش نمایش را مستقیماً در منطقه پیش نمایش اجرا می کند. نیازی به اجرای یک شبیه ساز یا دستگاه فیزیکی ندارد زیرا از قسمت منتقل شده از چارچوب Android به نام Layoutlib استفاده می کند. Layoutlib یک نسخه سفارشی از Framework Android است که برای اجرای خارج از دستگاه های Android طراحی شده است. هدف این کتابخانه ارائه پیش نمایش طرح در استودیوی اندرویدی است که بسیار نزدیک به ارائه آن در دستگاه ها است.

محدودیت ها پیش نمایش

به دلیل شیوه ارائه پیش نمایش در Android Studio ، آنها سبک وزن هستند و نیازی به کل چارچوب Android برای ارائه آنها ندارند. با این حال ، این با محدودیت های زیر همراه است:

• بدون دسترسی به شبکه
• بدون دسترسی به پرونده
• برخی از API های Context ممکن است کاملاً در دسترس نباشند

پیش نمایش ها و ViewModels

پیش نمایش ها هنگام استفاده از ViewModel در یک ترکیب محدود هستند. سیستم پیش نمایش قادر به ساخت کلیه پارامترهای منتقل شده به یک ViewModel مانند مخازن ، موارد استفاده ، مدیران یا موارد مشابه نیست. همچنین ، اگر ViewModel شما در تزریق وابستگی (مانند HILT ) شرکت می کند ، سیستم Previews نمی تواند کل نمودار وابستگی را برای ساخت ViewModel بسازد.

هنگامی که سعی می کنید یک ترکیب را با ViewModel پیش نمایش دهید ، Android Studio هنگام ارائه آهنگ سازی خاص خطایی را نشان می دهد:

هشدار: شما نباید نمونه های ViewModel را به سایر توابع سازنده منتقل کنید. هنگامی که این کار را انجام می دهید ، ترکیبات را با نوع ViewModel جفت می کنید ، که باعث می شود آنها کمتر قابل استفاده مجدد ، آزمایش سخت تر و قادر به پیش نمایش نباشند.

اگر می خواهید یک ترکیب قابل استفاده را که از ViewModel استفاده می کند ، پیش نمایش کنید ، باید با پارامترهای ViewModel که به عنوان آرگومان های Composable منتقل شده است ، ترکیب دیگری را ایجاد کنید. به این ترتیب ، نیازی به پیش نمایش ترکیب قابل استفاده از 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
  )
}

@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

شما همیشه می توانید برای لیست کامل پارامترهایی که می توانند هنگام شخصی @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 @Preview سهولت استفاده ، و نکات بیشتر ابزار ابزار را بیاموزید ، از ابزار Compose Compose استفاده کنید.

{% کلمه به کلمه %} {% آخر کلمه %}