如何在 Jetpack Compose Pager 中处理多个 TextField 焦点？

我有一个寻呼机。每个页面上都有一个 TextField。我正在做过渡animateScrollToPage()。如何让每个页面上的 TextField 获得焦点？

当我给予Modifier.focusRequster()到文本字段并检查index = pagerState.currentIndex，文本字段在过渡动画结束之前聚焦。

@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

您可以检查页面偏移量是否为零以及 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")
        }
    }
}