Android Jetpack Compose 水平和垂直滑動頁面元件 Pager

在以前使用 XML 的 Android 中要使用水平或垂直滑動的頁面會使用 ViewPager2，現在新的 Android Jetpack Compose 則是使用 Pager 。水平左右滑動是 HorizontalPager ，垂直上下滑動是 VerticalPager ，雖然目前還在開發中，是實驗性功能，但是已經從 Accompanist 提升(upstream)到 AndroidX ，穩定性可以說是非常高了，不過使用方式還是有可能會變更。

加入依賴

需要在 build.gradle.kts(Module :app) 中加入 androidx.compose.foundation 依賴:

	
dependencies {
    implementation("androidx.compose.foundation:foundation:1.5.3")
}
    

基本使用示範

建立三個水平左右可以滑動的頁面，中間顯示頁次(從 0 開始)

    
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier


@OptIn(ExperimentalFoundationApi::class) // 啟用實驗性功能
@Composable
fun myPager() {
    val pagerState = rememberPagerState(pageCount = {
        3
    })
    HorizontalPager(state = pagerState) { page ->
        Box(Modifier.fillMaxSize()) {
            Text(
                text = "Page: $page",
                modifier = Modifier.align(Alignment.Center)
            )
        }
    }
}
    

切換到指定頁面示範

建立一個 Icon ，點擊後會跳轉到第三頁

    
import androidx.compose.runtime.rememberCoroutineScope
import kotlinx.coroutines.launch


val scope = rememberCoroutineScope()
Icon(Icons.Outlined.Search, contentDescription = "搜尋", Modifier.clickable {
    scope.launch {
        // 切換到第三頁
        pagerState.animateScrollToPage(2)
    }
})
    

參考資料：
Accompanist - Pager layouts
GitHub - google/accompanist
android developers - Pager in Compose
Jetpack Compose Accompanist — An FAQ.
android developers - Create swipe views with tabs using ViewPager
android developers - Migrate from ViewPager to ViewPager2