กลุ่มเป้าหมายที่เน้น

คุณจัดกลุ่มเป้าหมายโฟกัสหลายรายการเข้าด้วยกันได้โดยใช้ตัวแก้ไข focusGroup การจัดกลุ่มช่วยให้คุณจัดการลำดับชั้นของโฟกัส แยกภูมิภาค UI เชิงตรรกะ (เช่น แถบเครื่องมือ การดำเนินการในกล่องโต้ตอบ หรือรายการการ์ด) และสกัดกั้นเมื่อโฟกัสเข้าหรือ ออกจากภูมิภาค

แนวคิดการสนทนากลุ่ม: เข้า ออก และการไปยังส่วนต่างๆ เริ่มต้น

การสนทนากลุ่มจะสร้างขอบเขตการนำทางที่สอดคล้องกันรอบเป้าหมายโฟกัสย่อย การทำความเข้าใจวิธีที่โฟกัสเคลื่อนที่ข้ามขอบเขตนี้ขึ้นอยู่กับแนวคิดสำคัญ 2 ประการต่อไปนี้

• เข้า: เหตุการณ์ที่เกิดขึ้นเมื่อโฟกัสเปลี่ยนจากองค์ประกอบใดก็ตาม นอกกลุ่มโฟกัสไปยังองค์ประกอบภายในกลุ่ม
• ออก: เหตุการณ์ที่เกิดขึ้นเมื่อโฟกัสออกจากองค์ประกอบภายในสุดท้ายของ กลุ่มและเปลี่ยนไปเป็นเป้าหมายโฟกัสภายนอก

รูปที่ 1 การสนทนากลุ่มที่มีเหตุการณ์เข้าและออก

ลักษณะการทำงานเริ่มต้นของการย้ายโฟกัส

โดยค่าเริ่มต้น เมื่อการสนทนากลุ่มได้รับโฟกัสจากภายนอก จะเกิดสิ่งต่อไปนี้

1. การเข้าสู่กลุ่ม: Compose จะเลือกเป้าหมายโฟกัสภายในที่เป็นเด็กโดยอัตโนมัติ สำหรับการไปยังส่วนต่างๆ แบบมิติเดียว (Tab) ระบบจะเลือกองค์ประกอบย่อยแรกตามลำดับการแสดงผล สำหรับการไปยังส่วนต่างๆ แบบ 2 มิติ (ปุ่มลูกศรหรือ D-pad) ระบบจะเลือกองค์ประกอบย่อยที่อยู่ใกล้กับทิศทาง ที่เข้ามามากที่สุด
2. การไปยังส่วนต่างๆ ภายในกลุ่ม: การกดปุ่มนำทางซ้ำๆ จะย้ายโฟกัส ไปยังเป้าหมายโฟกัสที่อยู่ระดับเดียวกันซึ่งอยู่ในกลุ่ม
3. ออกจากกลุ่ม: เมื่อผู้ใช้ไปยังเป้าหมายโฟกัสสุดท้าย ภายในกลุ่มแล้ว การกดแป้นครั้งถัดไปจะออกจากกลุ่มและย้ายโฟกัสไปยัง เป้าหมายโฟกัสที่อยู่ติดกันนอกกลุ่ม

ปรับแต่งการเปลี่ยนเส้นทางเมื่อเข้าสู่โหมดโฟกัส

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

เจตนาและกรณีการใช้งาน

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

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

รูปที่ 2 ปุ่มยกเลิกและยืนยันที่มีเป้าหมายรายการโฟกัสเริ่มต้น

กรณีการใช้งานอื่นๆ ที่พบบ่อยมีดังนี้

• ย้ายโฟกัสไปยังแท็บที่เลือกอยู่ในปัจจุบันโดยตรงเมื่อป้อน TabRow
• ย้ายโฟกัสไปยังตัวควบคุม "เล่น / หยุดชั่วคราว" โดยตรงเมื่อเข้าสู่แถบการเล่นสื่อ

การใช้งานด้วย onEnter และ FocusRequester

วิธีเปลี่ยนเส้นทางโฟกัสเมื่อเข้าสู่การสนทนากลุ่ม

1. ใช้ตัวแก้ไข focusGroup กับคอนเทนเนอร์หลัก ที่ครอบคลุมเป้าหมายโฟกัสที่เกี่ยวข้อง
2. ใช้ตัวแก้ไข focusProperties กับคอนเทนเนอร์ และกำหนดค่าการเรียกกลับ onEnter
3. ในonEnterการเรียกกลับ (กำหนดขอบเขตเป็น FocusEnterExitScope) เรียกใช้ requestFocus() ใน FocusRequester ที่เชื่อมโยงกับ ค่าเริ่มต้นของบุตรหลานที่ต้องการโดยใช้ focusRequester

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}
FocusGroup.kt

ภายใน onEnter และ onExit คุณยังเรียกใช้ cancelFocusChange() เพื่อ บล็อกการเปลี่ยนโฟกัสข้ามขอบเขตโดยสมบูรณ์ หรือตรวจสอบ requestedFocusDirection เพื่อปรับแต่งการกำหนดเส้นทางตามว่าผู้ใช้ ไปยังส่วนต่างๆ โดยใช้ Tab, Down หรือ Left หรือไม่

คอนเทนเนอร์ที่เลื่อนได้จะเป็นกลุ่มโฟกัสโดยค่าเริ่มต้น

ใน Jetpack Compose คอนเทนเนอร์ที่เลื่อนได้ เช่น LazyRow, LazyColumn และ LazyVerticalGrid จะทําหน้าที่เป็นกลุ่มโฟกัสโดยอัตโนมัติ คุณไม่จำเป็นต้องใช้ตัวแก้ไข focusGroup กับองค์ประกอบเหล่านั้นอย่างชัดเจนเพื่อตั้งค่าการเรียกกลับ onEnter หรือ onExit