Как я могу справиться с несколькими фокусами TextField в Jetpack Compose Pager?

Question

У меня есть пейджер. На каждой странице есть TextField. Я делаю переходы сanimateScrollToPage(). Как я могу получить фокус TextField на каждой странице?

Когда я даюModifier.focusRequster()в TextField и проверьтеindex = pagerState.currentIndex, TextField фокусируется до завершения анимации перехода.

      @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

Answer 1

Вы можете проверить, что смещение страницы равно нулю, а pagerState.currentPage равно индексу отображаемой страницы.

      @Preview
@Composable
fun PagerScreen(
) {
    val pagerState = rememberPagerState()
    val pageList = listOf<@Composable () -> Unit>(
        { Page1(0, pagerState) },
        { Page1(1, pagerState) },
        { Page1(2, pagerState) }
    )

    HorizontalPager(
        state = pagerState,
        userScrollEnabled = false,
        count = pageList.size
    ) { index ->
        pageList[index]()
    }

}

@Composable
fun Page1(index: Int, pagerState: PagerState) {
    val scope = rememberCoroutineScope()
    val nextPage = pagerState.currentPage + 1
    val offset = pagerState.currentPageOffset
    var text by remember { mutableStateOf(TextFieldValue("")) }

    val focusRequester = remember { FocusRequester() }

    val requestFocus by remember {
        derivedStateOf {
            pagerState.currentPageOffset == 0f && index == pagerState.currentPage
        }
    }

    LaunchedEffect(key1 = requestFocus) {
        if (requestFocus) {
            focusRequester.requestFocus()
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {

        Text(text = "Offset: $offset")
        TextField(
            modifier = Modifier.focusRequester(focusRequester),
            value = text,
            onValueChange = { value -> text = value }
        )
        Button(
            onClick = {
                scope.launch { pagerState.animateScrollToPage(nextPage) }
            }
        ) {
            Text(text = "Next")
        }
    }
}