در Jetpack Compose Glimmer، VerticalList مشابه Compose LazyColumn عمل میکند و فقط موارد قابل مشاهده را ترکیب و چیدمان میکند تا عملکرد بالا را حفظ کند. با این حال، در Jetpack Compose Glimmer، لیستهای عمودی برای کنترلهای عینک نمایش ساخته شدهاند، جایی که کاربر با استفاده از یک صفحه لمسی به جای صفحه لمسی تعامل میکند. در حالی که یک کاربر تلفن همراه میتواند در هر زمان هر مختصاتی را روی صفحه نمایش لمس کند، کاربری که عینک نمایش دارد فقط میتواند با موردی که فوکوس را در دست دارد تعامل داشته باشد.
رفتار متمرکز و موارد فرزند
لیستهای عمودی برای مدیریت خودکار ناوبری مبتنی بر فوکوس بهینه شدهاند. برخلاف لیستهای دستگاههای تلفن همراه که فوکوس و اسکرول اغلب از هم جدا هستند، یک لیست عمودی با حرکت دادن فوکوس روی آیتمهای فرزند خود هنگام اسکرول کردن کاربر با تاچپد، این دو را هماهنگ میکند. خود لیست قابل فوکوس نیست، بنابراین فوکوس را برای فرزندان خود مدیریت و درخواست میکند تا کاربر هنگام اسکرول کردن، نقطه تعامل مشخصی داشته باشد.
از آنجا که هیچ ورودی لمسی مستقیمی وجود ندارد، تمام آیتمهای فرزندی را که در یک لیست عمودی قرار میدهید، قابل فوکوس کنید و وقتی آیتمها فوکوس دارند، یک پاسخ بصری، مانند یک حاشیه یا هایلایت فعال، ارائه دهید. در حالی که کاربران هنوز میتوانند از کنار آیتمهای غیرقابل فوکوس عبور کنند، نمیتوانند با آنها تعامل داشته باشند. در صورت امکان، از اجزای داخلی مانند ListItem یا Card در لیستهای عمودی خود استفاده کنید، زیرا این اجزا از قبل قابل فوکوس هستند و بازخورد بصری برای حالتهای فوکوس ارائه میدهند.
مثال: لیست عمودی با چندین آیتم
کد زیر نحوه استفاده از یک لیست عمودی با متدهای item و items DSL برای ایجاد لیستی از آیتمها را نشان میدهد:
@Composable fun VerticalListSample() { VerticalList { item { ListItem { Text("Header") } } items(count = 10) { index -> ListItem { Text("Item-$index") } } item { ListItem { Text("Footer") } } } }
مثال: لیست عمودی با جایگاه عنوان
Jetpack Compose Glimmer همچنین یک لیست عمودی اضافه بار ارائه میدهد که شامل یک جایگاه عنوان است. عنوان غیر قابل فوکوس (معمولاً TitleChip ) در مرکز بالا ثابت میماند در حالی که محتوای لیست در زیر آن پیمایش میشود.
کد زیر یک لیست عمودی با یک جایگاه عنوان ایجاد میکند:
@Composable fun VerticalListWithTitleChipSample() { val ingredientItems = listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon") VerticalList(title = { TitleChip { Text("Ingredients") } }) { items(ingredientItems) { text -> ListItem { Text(text) } } } }
استفاده از وضعیت لیست برای عملیات لیست برنامه نویسی شده
از ListState برای کنترل و مشاهده جنبههای مختلف وضعیت لیست، مانند موقعیت اسکرول آن با استفاده از ویژگیهای firstVisibleItemIndex و firstVisibleItemScrollOffset ، استفاده کنید.
شما میتوانید با استفاده از rememberListState این وضعیت را بالا ببرید تا به صورت برنامهنویسی شده با استفاده از scrollToItem و animateScrollToItem اسکرول کنید.