← Back to Foundation
HorizontalPager
Component
in
Foundation
. Since 1.4.0Overview
Examples
Community Notes
A Pager that scrolls horizontally. Pages are lazily placed in accordance to the available viewport size. By definition, pages in a Pager have the same size, defined by pageSize and use a snap animation (provided by flingBehavior to scroll pages into a specific position). You can use beyondBoundsPageCount to place more pages before and after the visible pages.
If you need snapping with pages of different size, you can use a SnapFlingBehavior with a SnapLayoutInfoProvider adapted to a LazyList.
Overloads
HorizontalPager
@Composable
@ExperimentalFoundationApi
fun HorizontalPager(
state: PagerState,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues(0.dp),
pageSize: PageSize = PageSize.Fill,
beyondBoundsPageCount: Int = PagerDefaults.BeyondBoundsPageCount,
pageSpacing: Dp = 0.dp,
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
flingBehavior: SnapFlingBehavior = PagerDefaults.flingBehavior(state = state),
userScrollEnabled: Boolean = true,
reverseLayout: Boolean = false,
key: ((index: Int) -> Any)? = null,
pageNestedScrollConnection: NestedScrollConnection = remember(state) {
PagerDefaults.pageNestedScrollConnection(state, Orientation.Horizontal)
},
pageContent: @Composable PagerScope.(page: Int) -> Unit
)
Parameters
Name | Description |
---|---|
state | The state to control this pager |
modifier | A modifier instance to be applied to this Pager outer layout |
contentPadding | a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via modifier param. You can use it to add a padding before the first page or after the last one. Use pageSpacing to add spacing between the pages. |
pageSize | Use this to change how the pages will look like inside this pager. |
beyondBoundsPageCount | Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for beyondBoundsPageCount will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in the direction of the scroll during scroll events. |
pageSpacing | The amount of space to be used to separate the pages in this Pager |
verticalAlignment | How pages are aligned vertically in this Pager. |
flingBehavior | The FlingBehavior to be used for post scroll gestures. |
userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using PagerState.scroll even when it is disabled. |
reverseLayout | reverse the direction of scrolling and layout. |
key | a stable and unique key representing the item. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. If null is passed the position in the list will represent the key. |
pageNestedScrollConnection | A NestedScrollConnection that dictates how this Pager behaves with nested lists. The default behavior will see Pager to consume all nested deltas. |
pageContent | This Pager's page Composable |
Previous Component← DrawBorder
Next ComponentHorizontalScroller →