Jhonatan Sabadi
01/17/2023, 6:47 PMColumn {
VerticalPager(
state = hourPageState,
modifier = Modifier.size(50.dp),
pageCount = timeState.hoursFromNow.count(),
) {
Column {
Text(
modifier = Modifier.fillMaxWidth(),
text = timeState.hoursFromNow[it],
textAlign = TextAlign.Center
)
}
}
}
Colton Idle
01/17/2023, 10:22 PMJhonatan Sabadi
01/18/2023, 10:22 AMste
01/18/2023, 1:25 PMAnimatable
• To assign each element a certain height so that itemIndex = animatable.value / itemHeight
• A vertical drag listener (Modifier.draggable
or Modifier.pointerInput
+ detectVerticalDragGestures
) to govern the animatable
• Use a custom Layout
to display items. Otherwise, if you just have texts or simple shapes, you can just use a plain Canvas
and use drawText
. In both cases, you need to take the animatable.value
into accountJhonatan Sabadi
01/19/2023, 2:08 PMval customPageSize = object : PageSize {
override fun Density.calculateMainAxisPageSize(
availableSpace: Int,
pageSpacing: Int
): Int {
return (availableSpace - 2 * pageSpacing) / 3
}
}
VerticalPager(
state = hourPageState,
pageSize = customPageSize,
modifier = Modifier.size(height = 150.dp, width = 50.dp),
pageCount = timeState.hoursFromNow.count(),
) {
Text(
modifier = Modifier.fillMaxWidth(),
text = timeState.hoursFromNow[it],
fontSize = if (hourPageState.currentPage + 1 == it) 20.sp else 12.sp,
textAlign = TextAlign.Center
)
}
Using this code, was possible to get this result.