رونهادهای عنصر میانای کاربر با جدول

‫Jetpack Compose Grid API برای طرح‌بندی‌های ساختاری و دوبعدی صفحه طراحی شده است. برخلاف شبکه‌های تنبل که برای مجموعه‌های بزرگ داده بهینه‌سازی شده‌اند، Grid به شما امکان می‌دهد ساختار چیدمان ثابت یا واکنش‌گرا را بااستفاده از ردیف‌ها (ردیف‌ها و ستون‌ها)، فاصله‌ها، و نواحی شبکه تعریف کنید. بااستفاده از Modifier.gridItem، موارد را در این ساختار قرار می‌دهید که به شما کنترل صریح بر موقعیت‌یابی و گستردگی در ظرف شبکه می‌دهد.

وقتی میانای کاربری شما به چندین مورد در یک ناحیه توری یا نواحی هم‌پوشان نیاز دارد (مانند هم‌پوشانی‌های نشان، نشانگرهای وضعیت، یا کارت‌های لایه‌ای)، ابهام مختصات می‌تواند رفتار طرح‌بندی را غیرقابل‌پیش‌بینی کند. مدیریت عمق مؤلفه‌های هم‌پوشان بدون متوسل شدن به تودرتو کردن پیچیده Box یا جابه‌جایی مختصات دستی برای حفظ کد چیدمان تمیز و خوانا ضروری است.

روال‌های مطلوب

• ترتیب اعلام: Grid از ترتیب استاندارد zIndex براساس ترتیب اعلام در بلوک Grid پیروی می‌کند. مواردی که بعداً در بلوک محتوای Grid اعلام می‌شوند، روی مواردی که قبلاً اعلام شده‌اند ارائه می‌شوند.
• کنترل صریح z-index: اگر لازم است ترتیب ترسیم پیش‌فرض عناصر هم‌پوشان را به‌طور صریح کنترل یا لغو کنید، از Modifier.zIndex استفاده کنید.
• منطقه نام‌گذاری‌شده درمقابل هم‌پوشانی‌های مورد: از Grid و مناطق نام‌گذاری‌شده برای تعریف ساختار چیدمانتان استفاده کنید، اما منطق هم‌پوشانی پیچیده را در gridItem خاص نگه دارید اگر آن هم‌پوشانی‌ها به‌طور منطقی به آن سلول توری گره خورده‌اند.
• فاصله‌های عمدی برای هم‌پوشانی‌ها: هنگام هم‌پوشانی، مطمئن شوید که پارامترهای rowSpan و columnSpan برای عناصر هم‌پوشانی عمدی هستند تا کنترل کنید چه مقدار از محتوای زیرین پنهان می‌شود.

مواد تشکیل‌دهنده

• Grid: محفظه چیدمان ساختاری دوبعدی
• GridConfigurationScope.area: تابع حوزه‌ای که برای تعریف کردن مناطق نام‌گذاری‌شده و نواحی هم‌پوشانی در سراسر قطعه‌های شبکه‌ای استفاده می‌شود
• ‫Modifier.gridItem: اصلاح‌کننده‌ای که برای قرار دادن و گسترش دادن عناصر قابل‌ترکیب در سراسر قطعه‌های جدولی یا در نواحی جدولی نام‌گذاری‌شده استفاده می‌شود
• Modifier.zIndex: اصلاح‌کننده‌ای که برای کنترل صریح ترتیب ارتفاع لایه و طراحی استفاده می‌شود

قدم‌ها

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

۱. پیکربندی جدول را تعریف کنید

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

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

۲. محتوای پایه را قرار دهید و رونهادها را اعلام کنید

بااستفاده از Modifier.gridItem، ترکیب‌شدنی‌های پایه را در سلول‌های شبکه قرار دهید. Grid از ترتیب استاندارد zIndex براساس ترتیب ترکیب‌بندی پیروی می‌کند، بنابراین مواردی که بعداً در بلوک Grid اعلام می‌شوند، روی موارد قبلی ترسیم می‌شوند. هنگام قرار دادن یک هم‌پوشانی در همان سلول یا یک ناحیه هم‌پوشانی، هم‌پوشانی قابل ترکیب را بعداز عنصر پایه اعلام کنید، یا به یک ناحیه نام‌گذاری‌شده ارجاع دهید. اگر لازم است این ترتیب ترسیم پیش‌فرض را به‌طور صریح کنترل یا لغو کنید، می‌توانید از Modifier.zIndex استفاده کنید.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

نتایج

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

شکل ۱. عناصر میانای کاربر هم‌پوشان در Compose Grid.