About
Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.
Gradle
Sample
| Default | Item size | Unfocused count | Custom divider | Custom focus |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Scroll to index | Observe index | Custom content wrapper | Reverse layout | Horizontal |
|---|---|---|---|---|
 |
 |
 |
 |
 |
Default
FVerticalWheelPicker(
modifier = Modifier.width(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}
Item size
FVerticalWheelPicker(
// ......
// Specified item height.
itemHeight = 60.dp,
) {
// ......
}
Unfocused count
FVerticalWheelPicker(
// ......
// Specified unfocused count.
unfocusedCount = 2,
) {
// ......
}
Custom divider
FVerticalWheelPicker(
// ......
focus = {
// Custom divider.
FWheelPickerFocusVertical(dividerColor = Color.Red, dividerSize = 2.dp)
},
) {
// ......
}
Custom focus
FVerticalWheelPicker(
// ......
// Custom focus.
focus = {
Box(modifier = Modifier
.fillMaxSize()
.border(width = 1.dp, color = Color.Gray))
},
) {
// ......
}
Scroll to index
// Specified initial index.
val state = rememberFWheelPickerState(10)
LaunchedEffect(state) {
delay(2000)
// Scroll to index.
state.animateScrollToIndex(20)
}
FVerticalWheelPicker(
// ......
// state
state = state,
) {
// ......
}
Observe index
FWheelPickerState.currentIndex- Index of picker when it is idle.FWheelPickerState.currentIndexSnapshot- Index of picker when it is idle or scrolling but not fling.
val state = rememberFWheelPickerState()
FVerticalWheelPicker(
// ......
// state
state = state,
// Index change callback
onIndexChanged = {
Log.i(TAG, "onIndexChanged ${state.currentIndex}")
},
) {
// ......
}
// Observe currentIndex, It is same with the onIndexChanged callback.
LaunchedEffect(state) {
snapshotFlow { state.currentIndex }
.distinctUntilChanged()
.collect {
Log.i(TAG, "currentIndex ${state.currentIndex}")
}
}
// Observe currentIndexSnapshot.
LaunchedEffect(state) {
snapshotFlow { state.currentIndexSnapshot }
.distinctUntilChanged()
.collect {
Log.i(TAG, "currentIndexSnapshot ${state.currentIndexSnapshot}")
}
}
Custom content wrapper
FVerticalWheelPicker(
// ......
// Content wrapper
contentWrapper = { index, state ->
if (state.currentIndexSnapshot == index) {
content(index)
} else {
// Modify content if it is not in focus.
Box(
modifier = Modifier
.rotate(90f)
.alpha(0.5f)
) {
content(index)
}
}
}
) {
// ......
}
Reverse layout
FVerticalWheelPicker(
// ......
// Reverse layout.
reverseLayout = true,
) {
// ......
}
Horizontal
FHorizontalWheelPicker is almost the same as FVerticalWheelPicker.
FHorizontalWheelPicker(
modifier = Modifier.height(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}
1 Aug 9, 2022
641 Jan 2, 2023
4 Dec 23, 2022
1.3k Dec 14, 2022
6 Sep 16, 2022
30 Nov 17, 2022
5 Dec 2, 2022
251 Dec 30, 2022
2.7k Dec 29, 2022
422 Nov 10, 2022
501 Dec 31, 2022
0 Nov 27, 2021
0 Jan 19, 2022
46 Oct 10, 2022
8 Aug 17, 2022
48 Jan 7, 2023
494 Jan 2, 2023