如何在 Jetpack compose 中检测 Horizo​​ntalPager 中的滑动？

Posted 2023-04-18

【中文标题】如何在 Jetpack compose 中检测 Horizo​​ntalPager 中的滑动？

【英文标题】：How to detect swipe in HorizontalPager in Jetpack compose?

【发布时间】：2022-01-04 13:39:25

【问题描述】：

我如何在我的HorizontalPager()? 中检测用户何时从一个标签滑动到第二个等等。

val pagerState = rememberPagerState(initialPage = 0)
HorizontalPager(count = TabCategory.values().size, state = pagerState)  index ->
                                Box(
                                    modifier = Modifier
                                        .fillMaxSize()
                                        .background(MaterialTheme.colors.onBackground)
                                ) 
                                    when (TabCategory.values()[index]) 
                                        TabCategory.Opinion ->  
                                        TabCategory.Information ->  
                                        TabCategory.Videos ->  
                                    
                                
                            

【参考方案1】：

在您的视图模型中，创建一个 pagerState 并监控它的 currentPage：

class MyViewModel : ViewModel() 

    val pagerState = PagerState()

    init 
        viewModelScope.launch 
            snapshotFlow  pagerState.currentPage .collect  page ->
                // Page is the index of the page being swiped.
            
        
    

在您的可组合中，使用 pagerState：

HorizontalPager(
  state = myViewModel.pagerState,
)  page ->

【参考方案2】：

PagerState 有一个 InteractionSource 来跟踪这些内容。 collectIsDraggedAsState 方法返回一个您可以订阅的 State<Boolean>，它通过 .value 公开其当前值。

这似乎测试良好。

@Composable
fun ExampleComposable()
    val pagerState=rememberPagerState()
    val isDragged=pagerState.interactionSource.collectIsDraggedAsState()
    HorizontalPager(count = injector.snippets.size,
    state = pagerState,
    )index->
         MyFancyExampleComposable(index)
         if (isDragged.value)
              respondToPageSwipeOrPartialPageSwipe()