توری

Grid یک رابط برنامه‌نویسی کاربردی (API) برای Jetpack Compose است که به شما امکان می‌دهد طرح‌بندی دوبعدی را به صورت انعطاف‌پذیر پیاده‌سازی کنید. با استفاده از این API، می‌توانید موارد را در طرح‌بندی‌های چند ستونی یا چند ردیفی نمایش دهید که با اندازه کانتینر موجود سازگار می‌شوند.

یک طرح‌بندی دوبعدی انعطاف‌پذیر و تطبیق‌پذیر با Grid
شکل ۱. یک طرح‌بندی دوبعدی انعطاف‌پذیر و تطبیق‌پذیر با Grid .

Grid چه تفاوتی با composable های مشابه دارد؟

Compose در حال حاضر کامپوننت‌های مشابهی مانند LazyVerticalGrid را ارائه می‌دهد. این کامپوننت‌ها عمدتاً برای تجسم مجموعه داده‌های بزرگ و همگن هستند - برای مثال، نمایش یک کاتالوگ محتوا در یک برنامه پخش ویدیو. این کامپوننت‌ها برای طرح‌بندی ساختاری یک صفحه یا کامپوننت پیچیده طراحی نشده‌اند.

همچنین می‌توانید با ترکیب چندین Row و Column یک طرح‌بندی دوبعدی پیاده‌سازی کنید. با این حال، این رویکرد دارای برخی معایب مانند سلسله مراتب عمیق و مشکلات در سازگاری است.

جدول زیر نمای کلی از طرح‌بندی‌های مناسب برای هر API را ارائه می‌دهد:

کامپوننت هدف
LazyVerticalGrid ، LazyStaggeredGrid ، LazyHorizontalGrid تجسم مجموعه داده‌های بزرگ و همگن که نیاز به بارگذاری تنبل دارند.
Row ، Column ، FlexBox طرح‌بندی یک بعدی
Grid طرح دو بعدی

اصطلاحات

برای درک نحوه کار Grid با اصطلاحات زیر آشنا شوید.

خط شبکه

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

این شبکه از چهار خط افقی و سه خط عمودی تشکیل شده است.
شکل ۲. این شبکه از چهار خط افقی و سه خط عمودی تشکیل شده است.

مسیر شبکه‌ای

یک مسیر شبکه‌ای، فضای بین دو خط شبکه‌ای است. یک مسیر سطری بین دو خط افقی و یک مسیر ستونی بین دو خط عمودی قرار دارد. برای تعریف اندازه این مسیرها، هنگام ایجاد شبکه، به آنها اندازه اختصاص دهید.

یک مسیر شبکه‌ای برای ردیف اول.
شکل ۳. یک مسیر شبکه‌ای برای ردیف اول.

سلول شبکه‌ای

یک سلول شبکه‌ای، محل تقاطع یک مسیر سطری و ستونی است.

یک سلول شبکه‌ای که محل تقاطع ردیف دوم و ستون دوم است.
شکل ۴. یک سلول شبکه‌ای که محل تقاطع ردیف دوم و ستون دوم است.

منطقه شبکه

یک ناحیه شبکه‌ای از چندین سلول شبکه‌ای تشکیل شده است. می‌توانید با ایجاد یک آیتم در چندین مسیر، یک ناحیه شبکه‌ای تعریف کنید.

یک ناحیه شبکه‌ای که از چهار سلول شبکه‌ای تشکیل شده است.
شکل 5. یک ناحیه شبکه‌ای که از چهار سلول شبکه‌ای تشکیل شده است.

شکاف شبکه

شکاف شبکه‌ای، فاصله‌ی بین مسیرهای شبکه‌ای است. شما نمی‌توانید یک عنصر رابط کاربری را در یک شکاف قرار دهید، اما می‌توانید یک عنصر رابط کاربری را در سراسر آن گسترش دهید.

یک فاصله شبکه‌ای بین ستون اول و ستون دوم.
شکل ۶. فاصله شبکه‌ای بین ستون اول و ستون دوم.