请求在 jetpack compose 中关注 TextField

Question

如何在 jetpack compose 中自动关注文本字段。当我单击文本字段并开始在其上键入时。同时，当我单击后退按钮时，然后当我尝试单击文本字段时，没有任何反应。

val textState = remember { mutableStateOf(TextFieldValue()) }
TextField(
    modifier = Modifier.fillMaxWidth(),
    value = textState.value,
    onValueChange = { value : TextFieldValue ->
        textState.value = value
    }
)

Answer 1

您可以将其FocusRequester与 SideEffect 一起使用。
就像是：

var text by remember { mutableStateOf("text") }

// initialize focus reference to be able to request focus programmatically
val focusRequester = FocusRequester()

Column {
    TextField(
        value = text,
        onValueChange = {
            text = it
        },
        label = { Text("label") },
        modifier = Modifier
            // add focusRequester modifier 
            .focusRequester(focusRequester)
    )

然后使用focusRequester.requestFocus(). 通过这种方式，系统将焦点授予与 this 相关的组件FocusRequester。

要在屏幕出现时自动聚焦该字段，您可以使用：

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

要手动将焦点授予该字段：

    Button(
         onClick = { focusRequester.requestFocus() }
    ){
        Text("Click to give the focus")
    }

Answer 2

在最新版本的 Jetpack Compose（目前为 1.3.3）中，如果您使用以下命令：

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

尝试自动对焦 a TextField，您会得到：

java.lang.IllegalStateException:
FocusRequester is not initialized. Here are some possible fixes:

    1. Remember the FocusRequester: val focusRequester = remember { FocusRequester() }
    2. Did you forget to add a Modifier.focusRequester() ?
    3. Are you attempting to request focus during composition? Focus requests should be made in
    response to some event. Eg Modifier.clickable { focusRequester.requestFocus() }

这是一个不使用的优雅解决方案delay：

java.lang.IllegalStateException:
FocusRequester is not initialized. Here are some possible fixes:

    1. Remember the FocusRequester: val focusRequester = remember { FocusRequester() }
    2. Did you forget to add a Modifier.focusRequester() ?
    3. Are you attempting to request focus during composition? Focus requests should be made in
    response to some event. Eg Modifier.clickable { focusRequester.requestFocus() }

Answer 3

val focusRequester = remember { FocusRequester() }
val inputService = LocalTextInputService.current
val focus = remember { mutableStateOf(false) }
BasicTextField(
    value = "value",
    modifier = Modifier
        .height(40.dp)
        .fillMaxWidth()
        .focusRequester(focusRequester)
        .onFocusChanged {
            if (focus.value != it.isFocused) {
                focus.value = it.isFocused
                if (!it.isFocused) {
                    inputService?.hideSoftwareKeyboard()
                }
            }
        },
),

LaunchedEffect("") {
    delay(300)
    inputService?.showSoftwareKeyboard()
    focusRequester.requestFocus()
}

Answer 4

发布问题的更新答案（API 在 Compose Beta 中重命名）

@Composable
fun AutoFocusingText() {
    var value by mutableStateOf("Enter Text")
    val focusRequester = remember { FocusRequester() }
    TextField(
        value = value, 
        onValueChange = { value = it },
        modifier = Modifier.focusRequester(focusRequester)
    )
    
    DisposableEffect(Unit) {
        focusRequester.requestFocus()
        onDispose { }
    }
}

Answer 5

如果您希望在导航到屏幕时文本字段自动聚焦，则可以使用此功能。这允许您在构图过程中不要做requestFocus这不是您应该做的事情。否则，您有时会收到IllegalStateException“FocusRequester 未初始化”消息。

 @Composable fun YourComposable(){ 
   val focusRequester = remember {FocusRequester()}
    
        LaunchedEffect(Unit) {
            this.coroutineContext.job.invokeOnCompletion {
                focusRequester.requestFocus()
            }
        }
    
       OutlinedTextField( modifier = Modifier.focusRequester(focusRequester))
         
              
}

这是因为当离开组合LaucnhedEffeect时里面的协程会被取消。LaunchedEffect

Answer 6

取自 Compose Unit Tests 并应用于 TextField Link

    @ExperimentalFocus
    @Composable
    fun AutoFocusingText() {
        val textState = remember { mutableStateOf(TextFieldValue()) }
        val focusState = remember { mutableStateOf(FocusState.Inactive) }
        val focusRequester = FocusRequester()
        val focusModifier = Modifier.focus()
        Row(
            modifier = Modifier.focusObserver { focusState.value = it }
        ) {
            val focusRequesterModifier = Modifier.focusRequester(focusRequester)
            TextField(
                modifier = focusModifier.then(focusRequesterModifier),
                value = textState.value,
                onValueChange = { value: TextFieldValue ->
                    textState.value = value
                },

                )
        }
        onActive {
            focusRequester.requestFocus()
        }
    }

编辑：将 Box 更改为 Row 因为 Box 已在 '1.0.0-alpha04' 中被弃用