لیست‌ها در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

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

رفتار متمرکز و موارد فرزند

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

از آنجا که هیچ ورودی لمسی مستقیمی وجود ندارد، تمام آیتم‌های فرزند داخل یک ستون تنبل Glimmer را قابل فوکوس کنید. وقتی آیتم‌ها فوکوس دارند، یک پاسخ بصری مانند یک حاشیه فعال یا هایلایت نیز ارائه دهید. در حالی که کاربران هنوز می‌توانند از کنار آیتم‌های غیرقابل فوکوس عبور کنند، نمی‌توانند با آنها تعامل داشته باشند. هر زمان که ممکن است از کامپوننت‌های داخلی مانند ListItem یا Card استفاده کنید، زیرا این کامپوننت‌ها از قبل قابل فوکوس هستند و بازخورد بصری برای حالت‌های فوکوس ارائه می‌دهند.

مثال: ستون‌های تنبل Glimmer با چندین آیتم

کد زیر نحوه استفاده از یک ستون تنبل Glimmer با متدهای item و items DSL را برای ایجاد لیستی از آیتم‌ها نشان می‌دهد:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

مثال: ستون‌های تنبل Glimmer با جایگاه عنوان

Jetpack Compose Glimmer همچنین یک سربار از GlimmerLazyColumn ارائه می‌دهد که شامل یک جایگاه عنوان است. عنوان غیر قابل فوکوس، که معمولاً یک TitleChip ، در مرکز بالا ثابت می‌ماند در حالی که محتوای لیست در زیر آن پیمایش می‌شود.

کد زیر یک ستون تنبل Glimmer با یک جایگاه عنوان ایجاد می‌کند:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

از حالت لیست تنبل Glimmer برای عملیات لیست برنامه نویسی استفاده کنید

برای کنترل و مشاهده جنبه‌های مختلف وضعیت لیست، مانند موقعیت اسکرول آن با استفاده از ویژگی‌های firstVisibleItemIndex و firstVisibleItemScrollOffset ، از GlimmerLazyListState استفاده کنید.

شما می‌توانید این وضعیت را با استفاده از rememberGlimmerLazyListState بالا ببرید تا به صورت برنامه‌نویسی شده با استفاده از scrollToItem و animateScrollToItem اسکرول کنید.