จัดการการดำเนินการของแป้นพิมพ์

เมื่อผู้ใช้โฟกัสไปที่คอมโพเนนต์ข้อความที่แก้ไขได้ เช่น TextField และอุปกรณ์มีแป้นพิมพ์ฮาร์ดแวร์แนบอยู่ ระบบจะเป็นผู้จัดการอินพุตทั้งหมด คุณสามารถระบุแป้นพิมพ์ลัดได้โดยจัดการเหตุการณ์สำคัญ

แป้นพิมพ์ลัดเริ่มต้น

แป้นพิมพ์ลัดต่อไปนี้พร้อมใช้งานทันที

แป้นพิมพ์ลัด การทำงาน คอมโพสเซเบิลที่รองรับแป้นพิมพ์ลัด
Shift+Ctrl+ลูกศรซ้าย/ลูกศรขวา เลือกข้อความไปจนถึงต้น/ท้ายคำ BasicTextField, TextField
Shift+Ctrl+ลูกศรขึ้น/ลูกศรลง เลือกข้อความไปจนถึงต้น/ท้ายย่อหน้า BasicTextField, TextField
Shift+Alt+ลูกศรขึ้น/ลูกศรลง หรือ Shift+Meta+ลูกศรซ้าย/ลูกศรขวา เลือกข้อความไปจนถึงต้น/ท้ายข้อความ BasicTextField, TextField
Shift+ลูกศรซ้าย/ลูกศรขวา เลือกอักขระ BasicTextField, TextField
Ctrl+A เลือกทั้งหมด BasicTextField, TextField
Ctrl+C/Ctrl+X/Ctrl+V คัดลอก/ตัด/วาง BasicTextField, TextField
Ctrl+Z/Ctrl+Shift+Z เลิกทำ/ทำซ้ำ BasicTextField, TextField
PageDown/PageUp เลื่อน LazyColumn, ตัวแก้ไข verticalScroll, ตัวแก้ไข scrollable

เหตุการณ์สำคัญ

ใน Compose คุณสามารถจัดการการกดแป้นแต่ละครั้งด้วย ตัวแก้ไข onKeyEvent ตัวแก้ไขจะยอมรับ Lambda ที่เรียกใช้เมื่อคอมโพเนนต์ที่แก้ไขได้รับเหตุการณ์สำคัญ เหตุการณ์สำคัญอธิบายได้ว่าเป็นออบเจ็กต์ KeyEvent คุณดูข้อมูลของเหตุการณ์สำคัญแต่ละรายการได้โดยอ้างอิงออบเจ็กต์ใน Lambda ที่ส่งไปยังตัวแก้ไข onKeyEvent

การกดแป้น 1 ครั้งจะส่งเหตุการณ์สำคัญ 2 รายการ รายการหนึ่งจะทริกเกอร์เมื่อผู้ใช้กดแป้น ส่วนอีกรายการจะทริกเกอร์เมื่อปล่อยแป้น คุณแยกความแตกต่างระหว่างเหตุการณ์สำคัญ 2 รายการได้ โดยอ้างอิงแอตทริบิวต์ type ของออบเจ็กต์ KeyEvent

ค่าที่แสดงผลของ Lambda onKeyEvent จะระบุว่ามีการจัดการเหตุการณ์สำคัญหรือไม่ แสดงผล true หากแอปจัดการเหตุการณ์สำคัญ ซึ่งจะหยุดการเผยแพร่เหตุการณ์

ข้อมูลโค้ดต่อไปนี้แสดงวิธีเรียกใช้ฟังก์ชัน doSomething() เมื่อผู้ใช้ปล่อยแป้น S ในคอมโพเนนต์ Box

Box(
    modifier = Modifier
        .onKeyEvent {
            if (
                it.type == KeyEventType.KeyUp &&
                it.key == Key.S
            ) {
                doSomething()
                true
            } else {
                false
            }
        }
        .focusable()
) {
    Text("Press S key")
}

แป้นกดร่วม

ออบเจ็กต์ KeyEvent มีแอตทริบิวต์ต่อไปนี้ซึ่งระบุว่ามีการกดแป้นกดร่วมหรือไม่

ระบุรายละเอียดเหตุการณ์สำคัญที่แอปจัดการ ข้อมูลโค้ดต่อไปนี้จะเรียกใช้ฟังก์ชัน doSomething() ก็ต่อเมื่อผู้ใช้ปล่อยแป้น S เท่านั้น หากผู้ใช้กดแป้นกดร่วม เช่น แป้น Shift แอปจะไม่เรียกใช้ฟังก์ชัน

Box(
    modifier = Modifier
        .focusable()
        .onKeyEvent {
            if (
                it.type == KeyEventType.KeyUp &&
                it.key == Key.S &&
                !it.isAltPressed &&
                !it.isCtrlPressed &&
                !it.isMetaPressed &&
                !it.isShiftPressed
            ) {
                doSomething()
                true
            } else {
                false
            }
        }
) {
    Text("Press S key with a modifier key")
}

กิจกรรมการคลิกแป้นเว้นวรรคและแป้น Enter

แป้น เว้นวรรค และแป้น Enter จะทริกเกอร์กิจกรรมการคลิกด้วย ตัวอย่างเช่น ผู้ใช้สามารถสลับ (เล่นหรือหยุดชั่วคราว) การเล่นสื่อ ด้วยแป้น เว้นวรรค หรือแป้น Enter โดยจัดการกิจกรรมการคลิกดังนี้

MediaPlayer(modifier = Modifier.clickable { togglePausePlay() })

ตัวแก้ไข clickable จะสกัดกั้นเหตุการณ์สำคัญ และเรียกใช้การเรียกกลับ onClick() เมื่อกดแป้น เว้นวรรค หรือ Enter นั่นจึงเป็นเหตุผลที่ฟังก์ชัน togglePausePlay() ถูกเรียกใช้ โดยการกดแป้น เว้นวรรค หรือแป้น Enter ในข้อมูลโค้ด

เหตุการณ์สำคัญที่ยังไม่ได้ใช้

ระบบจะเผยแพร่เหตุการณ์สำคัญที่ยังไม่ได้ใช้จากคอมโพเนนต์ที่เกิดเหตุการณ์ไปยังคอมโพเนนต์ภายนอกที่ล้อมรอบ ในตัวอย่างด้านล่าง InnerComponent จะใช้เหตุการณ์สำคัญ เมื่อปล่อยแป้น S ดังนั้น OuterComponent จึงไม่ได้รับเหตุการณ์สำคัญใดๆ ที่ทริกเกอร์ โดยการปล่อยแป้น S นั่นจึงเป็นเหตุผลที่ฟังก์ชัน actionB() ไม่เคยถูกเรียกใช้

เหตุการณ์สำคัญอื่นๆ ใน InnerComponent เช่น การปล่อยแป้น D สามารถจัดการได้โดย OuterComponent ฟังก์ชัน actionC() ถูกเรียกใช้เนื่องจากระบบเผยแพร่เหตุการณ์สำคัญสำหรับการ ปล่อยแป้น D ไปยัง OuterComponent

OuterComponent(
    modifier = Modifier.onKeyEvent {
        when {
            it.type == KeyEventType.KeyUp && it.key == Key.S -> {
                actionB() // This function is never called.
                true
            }

            it.type == KeyEventType.KeyUp && it.key == Key.D -> {
                actionC()
                true
            }

            else -> false
        }
    }
) {
    InnerComponent(
        modifier = Modifier.onKeyEvent {
            if (it.type == KeyEventType.KeyUp && it.key == Key.S) {
                actionA()
                true
            } else {
                false
            }
        }
    )
}

ตัวแก้ไข onKeyPreviewEvent

ในบางกรณีการใช้งาน คุณอาจต้องการสกัดกั้นเหตุการณ์สำคัญก่อนที่จะทริกเกอร์การดำเนินการเริ่มต้น การเพิ่มแป้นพิมพ์ลัดที่กำหนดเองลงใน TextField เป็นกรณีการใช้งานทั่วไป ข้อมูลโค้ดต่อไปนี้ช่วยให้ผู้ใช้ย้ายไปยังคอมโพเนนต์ที่โฟกัสได้ถัดไปโดย การกดแป้น Tab

val focusManager = LocalFocusManager.current
var textFieldValue by remember { mutableStateOf(TextFieldValue()) }

TextField(
    textFieldValue,
    onValueChange = {
        textFieldValue = it
    },
    modifier = Modifier.onPreviewKeyEvent {
        if (it.type == KeyEventType.KeyUp && it.key == Key.Tab) {
            focusManager.moveFocus(FocusDirection.Next)
            true
        } else {
            false
        }
    }
)

โดยค่าเริ่มต้น คอมโพเนนต์ TextField จะเพิ่มอักขระแท็บ ทุกครั้งที่ผู้ใช้กดแป้น Tab แม้ว่าจะมีการจัดการเหตุการณ์สำคัญด้วยตัวแก้ไข onKeyEvent ก็ตาม หากต้องการย้ายโฟกัสของแป้นพิมพ์โดยไม่เพิ่มอักขระแท็บ ให้จัดการเหตุการณ์สำคัญก่อนที่จะทริกเกอร์การดำเนินการที่เชื่อมโยงกับเหตุการณ์สำคัญ ดังที่แสดงในข้อมูลโค้ด Lambda onKeyPreviewEvent() จะสกัดกั้นเหตุการณ์สำคัญ โดยแสดงผล true

คอมโพเนนต์ระดับบนสามารถสกัดกั้นเหตุการณ์สำคัญที่เกิดขึ้นในคอมโพเนนต์ย่อยได้ ในข้อมูลโค้ดต่อไปนี้ ฟังก์ชัน previewSKey() จะถูกเรียกใช้ เมื่อผู้ใช้กดแป้น S แทนที่จะเรียกใช้ฟังก์ชัน actionForPreview()

Column(
    modifier = Modifier.onPreviewKeyEvent {
        if (it.key == Key.S) {
            previewSKey()
            true
        } else {
            false
        }
    }
) {
    Box(
        modifier = Modifier
            .focusable()
            .onPreviewKeyEvent {
                actionForPreview(it)
                false
            }
            .onKeyEvent {
                actionForKeyEvent(it)
                true
            }
    ) {
        Text("Press any key")
    }
}

Lambda onPreviewKeyEvent() สำหรับคอมโพเนนต์ Box จะไม่ทริกเกอร์ เมื่อผู้ใช้กดแป้น Tab ด้วย ระบบจะเรียกใช้ Lambda onPreviewKeyEvent() ในคอมโพเนนต์ระดับบนก่อน จากนั้นจึงเรียกใช้ onPreviewKeyEvent() ในคอมโพเนนต์ย่อย คุณสามารถใช้ลักษณะการทำงานนี้เพื่อใช้แป้นพิมพ์ลัดทั่วทั้งหน้าจอได้

แหล่งข้อมูลเพิ่มเติม

ถัดไป
ตัวช่วยเหลือสำหรับแป้นพิมพ์ลัด