فهرست‌های Lazy در Grid

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

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

برای نمایش مجموعه‌های بزرگ داده در چیدمان ساختاریافته صفحه، مؤلفه‌های تنبل مثل LazyColumn یا LazyRow را در سلول‌های Grid جاسازی کنید. اما توجه داشته باشید: قطعه‌های انعطاف‌پذیر (با مشخصاتی مانند 1.fr) اندازه ذاتی عناصر فرزند را پرس‌وجو می‌کنند. چون SubcomposeLayout از پاس‌های اندازه‌گیری ذاتی پشتیبانی نمی‌کند، قرار دادن فهرست تنبل در قطعه انعطاف‌پذیر باعث ازکارافتادن IllegalStateException می‌شود. برای قرار دادن ایمن فهرست‌های تنبل در داخل یک شبکه انعطاف‌پذیر باید از اندازه‌گذاری GridTrackSize.MinMax (مانند minmax(0.dp, 1.fr)) استفاده کنید تا از مرحله اندازه‌گیری ذاتی عبور کنید.

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

• به‌جای حلقه‌های صریح بزرگ، از فهرست‌های تنبل استفاده کنید: برای نمایش مجموعه‌داده‌های بزرگ یا پویا در یک Grid ساختاریافته، مؤلفه‌های تنبل (معمولاً LazyColumn یا LazyRow) را در سلول‌های توری خاص جاسازی کنید، به‌جای اینکه حلقه‌های صریح بزرگ روی موارد ایجاد کنید، زیرا Grid موارد را بازیافت نمی‌کند و محدودیت ۱۰۰۰ قطعه دارد.
• از اندازه‌گذاری قطعه MinMax برای فهرست‌های تنبل استفاده کنید: چون LazyColumn و LazyRow از گذرهای اندازه‌گیری ذاتی پشتیبانی نمی‌کنند (SubcomposeLayout را ببینید)، از GridTrackSize.MinMax در قطعه‌های انعطاف‌پذیر میزبان مؤلفه‌های تنبل استفاده کنید تا اندازه‌گیری‌های ذاتی را به‌طور ایمن دور بزنید.

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

• Grid: چیدمان ترکیب‌پذیری که موارد را در ساختار شبکه‌ای دوبعدی قرار می‌دهد که بااستفاده از ردیف‌ها و ستون‌های صریح پیکربندی شده است.
• LazyColumn: فهرست پیمایش عمودی که فقط مواردی را که درحال‌حاضر روی صفحه نمایان هستند ترکیب و بازیافت می‌کند.
• GridTrackSize.MinMax: ویژگی اندازه قطعه که مرزهای انعطاف‌پذیر (min و max) را برای میزبانی ایمن مؤلفه‌های تنبل بدون ایجاد خرابی‌های اندازه‌گیری زمان اجرا تعریف می‌کند.
• gridItem: افزونه Compose Modifier که عنصر میانای کاربر فرزند را به سلول خاص یا ناحیه نام‌گذاری‌شده‌ای در Grid اختصاص می‌دهد.

قدم‌ها

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

۱. پیکربندی کردن ردیابی‌های شبکه‌ای و نواحی نام‌گذاری‌شده

کلاس enum ایجاد کنید تا مناطق متمایز چیدمان صفحه‌نمایش را نشان دهد، و برای قطعه‌های چیدمان و نواحی نام‌گذاری‌شده، لامبدا GridConfigurationScope تعریف کنید. از GridTrackSize.MaxContent برای ردیف‌های سرصفحه و پاصفحه استفاده کنید تا با ابعاد محتوایشان مطابقت داشته باشند، و از minmax(0.dp, 1.fr) برای قطعه محتوای میزبان فهرست تنبل استفاده کنید تا فضای انعطاف‌پذیر را بدون پرس‌وجو از اندازه‌گیری‌های ذاتی پشتیبانی‌نشده اختصاص دهید:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}
GridByExamples.kt

۲. قرار دادن مؤلفه‌های ثابت در «جدول»

در composable خود، lazyConfig را به محفظه Grid ارسال کنید. در داخل content lambda، مؤلفه‌های ثابت (Header و Footer) را قرار دهید و آن‌ها را بااستفاده از Modifier.gridItem() با شناسه‌های ناحیه مربوطه خود جای‌گذاری کنید.

۳. جاسازی LazyColumn در ناحیه محتوا

در سلول محتوا، LazyColumn را بااستفاده از Modifier.gridItem(ScreenArea.Content) جاسازی کنید. چون قطعه محتوا با minmax(0.dp, 1.fr) در مرحله ۱ پیکربندی شده است، LazyColumn می‌تواند به‌طور ایمن موارد را در پیمایش بدون پرسمان ابعاد ذاتی پشتیبانی‌نشده اندازه‌گیری و بازیافت کند:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}
GridByExamples.kt

نتایج

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

منابع بیشتر

• شبکه در Jetpack Compose
• تنظیم ویژگی‌های محفظه
• فهرست‌های تنبل و شبکه‌های تنبل