این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

لیست‌های تنبل در یک شبکه، لیست‌های تنبل در یک شبکه، لیست‌های تنبل در یک شبکه، لیست‌های تنبل در یک شبکه

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

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

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

طرح‌بندی صفحه با یک سربرگ در بالا، یک لیست قابل اسکرول از موارد در قسمت محتوای اصلی و یک پاورقی در پایین. — **شکل ۱.** طرح‌بندی ساختاری صفحه نمایش با سربرگ، پاصفحه و یک `LazyColumn` تعبیه‌شده برای محتوا.

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

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

مواد لازم

Grid : طرح‌بندی ترکیبی که آیتم‌ها را در یک ساختار شبکه‌ای دوبعدی که با استفاده از مسیرهای صریح سطر و ستون پیکربندی شده است، قرار می‌دهد.
LazyColumn : فهرستی با قابلیت پیمایش عمودی که فقط آیتم‌های قابل مشاهده در صفحه را ترکیب و بازیابی می‌کند.
GridTrackSize.MinMax : ویژگی اندازه‌گیری Track که محدوده‌های انعطاف‌پذیر ( min و max ) را تعریف می‌کند تا اجزای lazy را به طور ایمن و بدون ایجاد خرابی‌های اندازه‌گیری زمان اجرا میزبانی کند.
gridItem : افزونه‌ی Modifier Compose که یک عنصر رابط کاربری فرزند را به یک سلول خاص یا ناحیه‌ی نامگذاری‌شده درون یک 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

۲. اجزای استاتیک را در Grid قرار دهید

در کامپوننت خود، lazyConfig به کانتینر Grid منتقل کنید. درون المبدای content ، اجزای استاتیک ( Header و Footer ) را قرار دهید و آنها را با استفاده از Modifier.gridItem() با شناسه‌های ناحیه مربوطه‌شان موقعیت‌یابی کنید.

۳. ستون تنبل (LazyColumn) را در قسمت محتوا قرار دهید

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

) }

@Composable >fun GridWithLazyColumn( modifier: Modifier = Modifier, items: List<String> = emptyList(), class="devsite-syntax-w"> { 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)) } } } class="devsite-github-link nocode no-select nocontent">GridByExamples.kt

نتایج

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

منابع اضافی

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

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

مواد لازم

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

مراحل

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

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

۲. اجزای استاتیک را در Grid قرار دهید

۳. ستون تنبل (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 ساختاریافته، به جای ایجاد حلقه‌های صریح بزرگ روی آیتم‌ها، کامپوننت‌های تنبل (معمولاً LazyColumn یا LazyRow ) را درون سلول‌های خاص grid جاسازی کنید، زیرا Grid آیتم‌ها را بازیافت نمی‌کند و محدودیت ۱۰۰۰ مسیر دارد.
از MinMax برای اندازه‌گیری مسیر لیست‌های تنبل استفاده کنید : از آنجا که LazyColumn و LazyRow از مراحل اندازه‌گیری ذاتی پشتیبانی نمی‌کنند (به SubcomposeLayout مراجعه کنید)، از GridTrackSize.MinMax در مسیرهای انعطاف‌پذیر میزبان اجزای تنبل استفاده کنید تا اندازه‌گیری‌های ذاتی را با خیال راحت دور بزنید.

مواد لازم

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

مراحل

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

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

۲. اجزای استاتیک را در Grid قرار دهید

۳. ستون تنبل (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 ساختاریافته، به جای ایجاد حلقه‌های صریح بزرگ روی آیتم‌ها، کامپوننت‌های تنبل (معمولاً LazyColumn یا LazyRow ) را درون سلول‌های خاص grid جاسازی کنید، زیرا Grid آیتم‌ها را بازیافت نمی‌کند و محدودیت ۱۰۰۰ مسیر دارد.
از MinMax برای اندازه‌گیری مسیر لیست‌های تنبل استفاده کنید : از آنجا که LazyColumn و LazyRow از مراحل اندازه‌گیری ذاتی پشتیبانی نمی‌کنند (به SubcomposeLayout مراجعه کنید)، از GridTrackSize.MinMax در مسیرهای انعطاف‌پذیر میزبان اجزای تنبل استفاده کنید تا اندازه‌گیری‌های ذاتی را با خیال راحت دور بزنید.

مواد لازم

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

مراحل

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

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

۲. اجزای استاتیک را در Grid قرار دهید

۳. ستون تنبل (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