ตัวเลือกและการทำงานของแป้นพิมพ์

แป้นพิมพ์ที่เหมาะกับงาน

การเลือกชนิดแป้นพิมพ์

var email by remember { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email
    )
)

แป้นพิมพ์ตัวเลข

var pin by remember { mutableStateOf("") }

OutlinedTextField(
    value = pin,
    onValueChange = { pin = it.filter { c -> c.isDigit() } },
    label = { Text("PIN") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Number
    )
)

การซ่อนรหัสผ่าน

var password by remember { mutableStateOf("") }

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password
    )
)

ปุ่มการทำงานของ IME

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") },
    keyboardOptions = KeyboardOptions(
        imeAction = ImeAction.Next
    )
)

การตอบสนองต่อการทำงานของ IME

val keyboard = LocalSoftwareKeyboardController.current

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { keyboard?.hide() }
    )
)

ย้ายโฟกัสไปยังฟิลด์ถัดไป

val focusManager = LocalFocusManager.current

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    keyboardActions = KeyboardActions(
        onNext = { focusManager.moveFocus(FocusDirection.Down) }
    )
)

ล้างโฟกัสเมื่อกด Done

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { focusManager.clearFocus() }
    )
)

การขอโฟกัสด้วยโปรแกรม

val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) { focusRequester.requestFocus() }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    modifier = Modifier.focusRequester(focusRequester),
    label = { Text("Search") }
)

การขึ้นต้นตัวพิมพ์ใหญ่และการแก้ไขอัตโนมัติ

OutlinedTextField(
    value = fullName,
    onValueChange = { fullName = it },
    label = { Text("Full name") },
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Words,
        autoCorrectEnabled = false
    )
)

Kotlin ล้วน: การเลือกการทำงานของ IME

fun imeActionFor(index: Int, lastIndex: Int): String =
    if (index == lastIndex) "Done" else "Next"

fun main() {
    val fields = listOf("name", "email", "password")
    fields.forEachIndexed { i, field ->
        println("$field -> ${imeActionFor(i, fields.lastIndex)}")
    }
}

ตรวจสอบความเข้าใจ

สรุปทบทวน