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

Question

我有一个分页器，每一页上都有一个文本框。我正在使用animateScrollToPage()进行转换。如何使每个页面上的文本框获得焦点？

当我将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

- sss sss

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")
        }
    }
}

- Thracian