فهرست‌ها در Jetpack Compose Glimmer

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

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

شکل ۱. نمونه‌ای از چند سبک مختلف فهرست در Jetpack Compose Glimmer.

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

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

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

مثال: ستون‌های تنبل درخشان با چند مورد

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

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

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

«درخشش Jetpack Compose» همچنین سرباری از 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) } }
    }
}

استفاده از وضعیت فهرست تنبل Glimmer برای عملیات فهرست برنامه‌ریزی‌شده

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

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