I have a pager. It has a TextField on each page. I'm doing the transitions with animateScrollToPage()
. How can I get the TextField on each page to come with focus?
When I give Modifier.focusRequster()
to the TextField and check index = pagerState.currentIndex
, the TextField focused before the transition animation ends.
@Composable
fun PagerScreen(
) {
val pagerState = rememberPagerState()
val pageList = listOf<@Composable () -> Unit>(
{ Page1(pagerState) },
{ Page2(pagerState) },
{ Page3(pagerState) }
)
HorizontalPager(
state = pagerState,
userScrollEnabled = false,
count = pageList.size
) { index ->
pageList[index]()
}
}
@Composable
fun Page1(pagerState: PagerState) {
val scope = rememberCoroutineScope()
val nextPage = pagerState.currentPage + 1
var text by remember { mutableStateOf(TextFieldValue("")) }
Column {
TextField(
value = text,
onValueChange = { value -> text = value }
)
Button(
onClick = {
scope.launch { pagerState.animateScrollToPage(nextPage) }
}
) {
Text(text = "Next")
}
}
}
// other pages same as Page1
You can check for offset of page being zero and pagerState.currentPage being equal to index of to page being shown.