Compose HorizontalPager实现二级联动效果

Android

2023-07-10 03:11:05

Compose HorizontalPager 实现二级联动效果

概要

二级联动是一种常见的交互模式，允许用户在两个滚动菜单中选择项目，一个菜单展示父项，另一个菜单展示子项。本文将展示如何使用 Jetpack Compose 的 HorizontalPager 组件实现二级联动。

优点

简化的 UI 设计
提高性能
提供一致的体验

实现步骤

1. 布局

在布局文件中，添加 HorizontalPager 和 ScrollableTabRow 组件：

<HorizontalPager
    modifier="..." />

<ScrollableTabRow
    modifier="..." />

2. ViewModel

在 ViewModel 中，创建两个可观察列表，一个用于父项，另一个用于子项：

class MyViewModel : ViewModel() {
    val parentItems = ObservableList<ParentItem>()
    val childItems = ObservableMap<ParentItem, List<ChildItem>>()
}

3. Compose 函数

在 Compose 函数中，使用 HorizontalPager 和 ScrollableTabRow 组件显示父项和子项：

@Composable
fun MyContent(viewModel: MyViewModel) {
    HorizontalPager(count = viewModel.parentItems.size, ...) { page ->
        // 显示父项的内容
    }

    ScrollableTabRow(...) {
        // 显示子项的内容
    }
}

4. 选择事件

当用户选择一个父项时，更新子项列表：

Tab(onClick = {
    viewModel.updateChildItems(parentItem)
})

示例代码

@Composable
fun HorizontalPagerExample() {
    val viewModel = HorizontalPagerViewModel()

    HorizontalPager(count = viewModel.parentItems.size, ...) { page ->
        val parentItem = viewModel.parentItems[page]

        Column(...) {
            Text(...)
            ScrollableTabRow(...) {
                viewModel.childItems[parentItem].forEachIndexed { index, childItem ->
                    Tab(...) {
                        viewModel.updateChildIndex(parentItem, index)
                    }
                }
            }
            Text(...)
        }
    }
}