یک شبکه قابل پیمایش ایجاد کنید

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

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

جهت گیری شبکه را تعیین کنید

ترکیب‌پذیرهای LazyHorizontalGrid و LazyVerticalGrid از نمایش موارد در یک شبکه پشتیبانی می‌کنند. یک شبکه عمودی تنبل اقلام خود را در یک محفظه قابل پیمایش عمودی نشان می‌دهد که در چندین ستون قرار دارد، در حالی که شبکه‌های افقی تنبل رفتار یکسانی در محور افقی دارند.

یک شبکه قابل پیمایش ایجاد کنید

کد زیر یک شبکه اسکرول افقی با سه ستون ایجاد می کند: 

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

نکات کلیدی در مورد کد

  • قابلیت ترکیب LazyHorizontalGrid جهت افقی شبکه را تعیین می کند.
    • برای ایجاد یک شبکه عمودی، به جای آن از LazyVerticalGrid استفاده کنید.
  • ویژگی rows نحوه چیدمان محتوای شبکه را مشخص می کند.
    • برای یک شبکه عمودی، از ویژگی columns برای مشخص کردن آرایش استفاده کنید.
  • items(itemsList) itemsList به LazyHorizontalGrid اضافه می کند. لامبدا یک Text قابل نوشتن برای هر آیتم ارائه می دهد و متن را روی توضیحات مورد تنظیم می کند.
  • item() یک آیتم را به LazyHorizontalGrid اضافه می کند در حالی که لامبدا یک Text به روشی مشابه به items() رندر می کند.
  • GridCells.Fixed تعداد سطرها یا ستون ها را مشخص می کند.

  • برای ایجاد یک شبکه با بیشترین تعداد ردیف ممکن، تعداد ردیف ها را با استفاده از GridCells.Adaptive تنظیم کنید.

    در کد زیر مقدار 20.dp مشخص می کند که هر ستون حداقل 20.dp باشد و همه ستون ها دارای عرض یکسان باشند. اگر پهنای صفحه 88.dp باشد، 4 ستون هر کدام با 22.dp وجود دارد.

نتایج

شکل 1. یک شبکه اسکرول افقی با استفاده از LazyHorizontalGrid .

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

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

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید