همپوشانی عناصر رابط کاربری با شبکه

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

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

بهترین شیوه‌ها

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

مواد لازم

• Grid : یک ظرف طرح‌بندی دوبعدی و ساختاری
• GridConfigurationScope.area : تابع Scope که برای تعریف مناطق نامگذاری شده و مناطق همپوشانی در مسیرهای شبکه استفاده می‌شود.
• Modifier.gridItem : اصلاح‌کننده‌ای که برای قرار دادن و گسترش composableها در مسیرهای شبکه یا در نواحی شبکه‌ای نامگذاری‌شده استفاده می‌شود.
• 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

نتایج

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