ظروف چیدمان

‫Jetpack Compose چندین محفظه چیدمان ارائه می‌دهد تا به شما در ساختاردهی و مرتب کردن مؤلفه‌های میانای کاربر کمک کند. درحالی‌که ترکیب‌پذیرهای چیدمان اصلی مانند Row و Column ترتیب‌های ساده را مدیریت می‌کنند، بسیاری از برنامه‌ها با تغییر اندازه صفحه‌نمایش و رشد داده‌های کاربر به راه‌حل‌های محفظه واکنش‌گراتر و سازگارتر نیاز دارند.

محفظه‌های چیدمان شامل موارد زیر است:

  • فهرست‌های تنبل و شبکه‌های تنبل: مؤلفه‌هایی مانند LazyColumn،‏ LazyRow، و LazyVerticalGrid که مجموعه‌های داده بزرگ یا با اندازه پویا را به‌طور کارآمد فقط با ترکیب‌بندی و چیدمان مواردی که درحال‌حاضر در نمای دید قابل‌مشاهده هستند نمایش می‌دهند.
  • ورق‌زن: دربرگیرنده‌هایی مثل HorizontalPager و VerticalPager که به کاربران امکان می‌دهند بین صفحه‌های محتوا تند بکشند یا پیمایش کنند.
  • چیدمان‌های جاری: محفظه‌های یک‌بعدی واکنش‌گرا (FlowRow و FlowColumn) که وقتی فضا تمام می‌شود، به‌طور خودکار موارد سرریز را به ردیف یا ستون بعدی منتقل می‌کنند.
  • شبکه: ساختاری انعطاف‌پذیر و دوبعدی که موارد را در چیدمان‌های چندستونی یا چندردیفی نمایش می‌دهد و با اندازه ظرف سازگار می‌شود.
  • FlexBox: محفظه سازگارشونده‌ای با الهام از CSS Flexbox که کنترل دقیقی بر نحوه پیچیدن، رشد، کوچک شدن، و تراز شدن موارد در امتداد محورهای اصلی و متقاطع برای پر کردن فضای دردسترس ارائه می‌دهد.

انتخاب محتوی چیدمان درست

هنگام ساختن چیدمان در Compose، انتخاب بین محفظه‌های چیدمان پایه و پیشرفته‌تر به طراحی شما، اینکه آیا موارد باید درصورت محدود بودن فضا پیچیده شوند، و نحوه تغییر اندازه پویای موارد بستگی دارد.

جدول زیر قابلیت‌های هریک از محفظه‌های چیدمان Compose 1D را خلاصه می‌کند:

محتوی

موارد را به خطوط جدید می‌برد

رشد هر مورد

کوچک کردن هر مورد

اندازه شروع هر مورد

موارد بزرگ می‌شوند تا فضای دردسترس را در چند خط پر کنند

تغییر ترتیب موارد

بارکردن کُند

بهترین برای:

ردیف / ستون

❌

✅ (ازطریق weight) فقط یک خط

❌

❌

❌

❌

❌

  • ردیف‌های یکسان با تعداد کمی از موارد ثابت. موارد در محدوده دردسترس جا می‌شوند و نیازی به پیچیدن در چند خط ندارند.

FlowRow / FlowColumn

✅

محدود

❌

❌

جزئی

❌

❌

  • FlexBox جایگزین آن شده است.

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅

  • فهرست‌های طولانی یا بی‌نهایت از مواردی که فقط موارد قابل‌مشاهده باید برای بهینه‌سازی عملکرد رندر شوند.
  • مجموعه‌های داده پویا یا بزرگ که در یک جهت پیمایش می‌شوند.

FlexBox

✅

✅

✅

✅

✅

✅

❌

  • چیدمان‌هایی که به قابلیت‌های تطبیقی نیاز دارند، مانند مشخص کردن اندازه اولیه، رشد/کاهش پویای موارد (grow/shrink)، بازآرایی بصری (order)، یا تراز کردن محور متقاطع در سطح مورد (alignSelf).
  • درحال چیدن موارد با اندازه‌های مختلف.

جدول زیر قابلیت‌های Grid و سایر ترکیب‌پذیرهای مشابه را خلاصه می‌کند:

محتوی

تراز دوبعدی دقیق

گسترش مورد (ستون‌ها)

گسترش مورد (ردیف‌ها)

بارکردن کُند

بهترین برای:

شبکه

✅

✅ (ازطریق GridArea)

✅

❌

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

LazyVerticalGrid

✅

✅ (ازطریق span)

❌

✅

  • فیدهای پیمایش عمودی و کاتالوگ‌های بزرگ که به ستون نیاز دارند.

LazyStaggeredGrid

❌ (فقط ۱ روز)

جزئی (فقط بازه کامل)

❌

✅

  • پیمایش فیدها با موارد دارای ارتفاع مختلط.

LazyHorizontalGrid

✅

❌

✅

✅

  • گردونه‌های پیمایش افقی یا داده‌های صفحه‌بندی‌شده چندردیفی.

ترکیب کردن ردیف‌ها و ستون‌ها

❌

❌

❌

❌

  • مونتاژ مؤلفه ساده، مانند قرار دادن برچسب نوشتاری در کنار نماد.