請求關注 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

發布問題的更新答案（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 2

使用1.0.x您可以使用以下內容：

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() 。 通過這種方式，系統將焦點授予與此FocusRequester關聯的組件。

要在屏幕出現時自動聚焦該字段，您可以使用：

DisposableEffect(Unit) {
    focusRequester.requestFocus()
    onDispose { }
}

要手動將焦點授予該字段：

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

Answer 3

取自 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' 中被棄用

Answer 4

    @Composable fun SomeComposable() {
        val focusRequester = remember { FocusRequester() }

    OutlinedTextField(
        value = TextFieldValue(
        text = state.text, // state come from else where
        selection = TextRange(state.text.length,state.text.length)),  
   
        onValueChange = { _:TextFieldValue -> Unit },
        modifier = Modifier
          .fillMaxWidth()
          .focusRequester(focusRequester),)

    SideEffect {
        focusRequester.requestFocus()
        }
    }

為什么SideEffect ： 文檔的第一行。
對於 Cursor Position這個答案有幫助。 onValueChanged保留在我的工作代碼中，我不需要它。

Answer 5

            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 6

如果您希望在導航到屏幕時自動聚焦文本字段，則可以使用它。 這允許您在合成期間不要請求requestFocus ，這不是您應該做的事情。 否則，您有時會收到帶有“FocusRequester 未初始化”消息的IllegalStateException 。

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

這是因為當LaunchedEffect離開組合時協程將被取消。

Answer 7

將 cursor 移動到文本的長度，並允許用戶使用以下代碼在TextField上移動 cursor

 @Composable
    fun AutoFocusingText(value:String,onValueChange: (newValue: String) -> Unit) {
    var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value,selection = TextRange(value.length))) }
    val textFieldValue = textFieldValueState.copy(text = value)
    val focusRequester = FocusRequester()
    DisposableEffect(Unit) {
        focusRequester.requestFocus()
        onDispose { }
    }
    TextField(
        value = textFieldValue,
        onValueChange = {
            textFieldValueState = it
            if (value != it.text) {
                onValueChange(it.text)
            } },
        modifier = Modifier.focusRequester(focusRequester = focusRequester)
    )


}

Answer 8

在最新版本的 Jetpack Compose（目前為 1.3.3）中，如果你使用這個：

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

試圖自動聚焦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的優雅解決方案：

val focusRequester = remember { FocusRequester() }

TextField(
    modifier = Modifier
        .focusRequester(focusRequester)
        .onGloballyPositioned {
            focusRequester.requestFocus() // IMPORTANT
        },
    value = someValue,
    onValueChange = {
        // ...
    }
)

// We don't need this
// LaunchedEffect(Unit) {
//     focusRequester.requestFocus()
// }