onPageSelected обратный вызов для JetPack Compose Pager

Question

Я использую пейджер JetPack Compose Pager от аккомпаниатора, и мне интересно, как я могу точно узнать, когда моя страница отображается на экране. Как onPageSelected методом из ViewPager.

Вот мой код:

      HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) { page ->
         // This method reinvoked many times.

      }

Потому что в настоящее время каждая перекомпоновка будет вызывать этот метод обратного вызова из пейджера.

Answer 1

Думаю лучше будет использовать

      LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // do your stuff with selected page
    }

Answer 2

Чтобы завершить решение @ysfcyln, вот официальная документация:

https://google.github.io/accompanist/pager/#реакция-на-страницу-изменения

полный пример есть:

      val pagerState = rememberPagerState()

LaunchedEffect(pagerState) {
    // Collect from the a snapshotFlow reading the currentPage
    snapshotFlow { pagerState.currentPage }.collect { page ->
        AnalyticsService.sendPageSelectedEvent(page)
    }
}

VerticalPager(
    count = 10,
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}

Answer 3

Вот мое решение, которое сработало для меня очень хорошо. Дополнительная вещь в нем была "distinctUntilChanged"

      LaunchedEffect(pagerState) {
    snapshotFlow {
        pagerState.currentPage
    }.distinctUntilChanged().collect { page ->
        // Now you can use selected page
        onPageChangeListener.invoke(page)
    }
}

Answer 4

Это решение проще, чем из официальной документации.

      LaunchedEffect(pagerState.currentPage) {
        // do your stuff with pagerState.currentPage
}

Answer 5

Мы можем выполнять наши задачи без каких-либо обратных вызовов, используя PagerState.

      val pagerState = rememberPagerState(pageCount = list.size)
        
        HorizontalPager(state = pagerState) { page ->
            // Our page content
            CardItemView(page, list[page])
        }

// Do your tasks based on the current page selected using pagerState.currentPage
        Toast.makeText(
            LocalContext.current,
            "Page selected ${pagerState.currentPage}",
            Toast.LENGTH_SHORT
        ).show()

Answer 6

Используйте переменную для отслеживания

      val trigger by remember { mutableStateOf (false) }
HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) { page ->
         // Shown successfully,
         trigger = true //use at other places as a callback to change state
      }

Answer 7

Разобрался! Мы можем использовать LaunchedEffect, чтобы узнать, когда ваша страница будет успешно показана.

      HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
     LaunchedEffect(key1 = page, block = {
       if (!pagerState.isScrollInProgress) {
          // Here you are
       }
     })
  }

LaunchedEffect вызывается только один раз для каждой клавиши (которая является текущей страницей). Итак, с помощью этого кода вы можете реализовать функцию onPageSelected.