如何在 Jetpack Compose 中將焦點從一個組件轉移到另一個組件？

Question

我試圖通過單擊按鈕將焦點從一個組件移動到另一個組件。 我現在有這段代碼。

    ...
            Column(
            modifier = Modifier
                .fillMaxSize()
                .statusBarsPadding()
                .navigationBarsPadding()
                .background(surfaceColors.surface)
        ) {
            TopBar(
                TopBarState(
                    endText = if (theViewPages[state.currentPageIndex].isShowSkip) stringResource(id = R.string.Skip) else null,
                    onEndTextPressed = { store.dispatch(TheViewAction.OnSkip) },
                    isBackButtonVisible = false
                ) //need to focus on this component when user clicks on button
            )
    
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier
                    .fillMaxHeight()
            ) {
                HorizontalPager(
                    HorizontalPagerState(
                        modifier = Modifier
                            .aspectRatio(1f / 1.5f),
                        count = theViewPages.size,
                        onPageChange = { store.dispatch(TheViewAction.OnPageChange(it)) },
                        manuallyScrollPage = state.manuallyScrollPage,
                        content = { currentPage ->
                            TheItemView(
                                item = TheViewItemModel(
                                    theViewPages[currentPage].isShowSkip,
                                    theViewPages[currentPage].title,
                                    theViewPages[currentPage].image,
                                    theViewPages[currentPage].description,
                                    theViewPages[currentPage].buttonText
                                ),
                                onButtonClick = {
                                    if (state.currentPageIndex != theViewPages.size - 1) {
                                        //when user clicks this button focus moves to above component
store.dispatch(TheViewAction.ManuallyScrollPage)
                                    } else {
                                        store.dispatch(TheViewAction.OnGettingStarted)
                                    }
                                }
                            )
                        }
                    )
                )
            }
        }
    ...

我有這個TheItemView

@Composable
fun TheItemView(
    item: TheViewItemModel,
    onButtonClick: () -> Unit
) {
    val typoColors = EnhanceTheme.colors.typoColors
    val defaultPadding = dimensionResource(id = DesignSystem.dimen.borderDefault)
    val largePadding = dimensionResource(id = DesignSystem.dimen.large)

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

...
        Text(
            text = "ABCDF",
            modifier = Modifier.padding(horizontal = largePadding)
        )

        Column(
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.weight(1f)
        ) {
            Button(
                buttonState =
                ButtonState(
                    label = "TEST,
                    onClick = onButtonClick,
                  
                   
                )
            )
        }
            ...
    }
}

我想這樣做是為了可訪問性。 我在網上嘗試了幾個選項，但都沒有用。 嘗試了這個Jetpack Compose：在沒有 onKeyEvent 的情況下使用方向鍵在 TextFields 之間移動焦點，類似的謝謝。

Answer 1

您可以使用FocusRequester

第1步

val scope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }

第2步

將FocusRequester附加到目標可組合項的modifier

Modifier.focusRequester(focusRequester)

步驟 3

像這樣在里面請求焦點onClick lambda

scope.launch { focusRequester.requestFocus() }

例子

Surface(
   modifier = Modifier.padding(16.dp),
   color = MaterialTheme.colorScheme.background
) {
    val scope = rememberCoroutineScope()
    val focusRequester = remember { FocusRequester() }
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    Column(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            modifier = Modifier
                .fillMaxWidth(),
            placeholder = {
                Text(text = "email")
            }
        )
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(focusRequester),
            placeholder = {
                Text(text = "password")
            }
        )
        Button(onClick = {
            scope.launch {
                focusRequester.requestFocus()
            }
        }) {
            Text(text = "Move focus on password field")
        }
    }
}