กองซ้อนแนวตั้งใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
แว่นตา Display
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer นั้น VerticalStack เป็นเลย์เอาต์ที่เลื่อนได้ในแนวตั้งแบบ Lazy ซึ่งจัดเรียงรายการในลำดับสามมิติที่ซ้อนทับกันในเชิงภาพ รายการหลักจะแสดงอย่างโดดเด่นในเบื้องหน้า ขณะที่รายการถัดๆ ไปจะวางอยู่ด้านหลัง

รูปที่ 1 ตัวอย่างสแต็กสไตล์ต่างๆ ใน Jetpack Compose Glimmer

ลักษณะการทำงานของการเลื่อนและการวางตำแหน่ง

เนื่องจากสแต็กจะจัดเรียงรายการในเลย์เอาต์ที่กะทัดรัดและซ้อนทับกัน จึงมี ลักษณะการทำงานบางอย่างที่แตกต่างจากคอมโพเนนต์แบบลำดับประเภทอื่นๆ เช่น รายการ

  • เมื่อผู้ใช้เลื่อนในแนวตั้ง รายการเบื้องหน้าที่ใช้งานอยู่จะเลื่อนออกจากมุมมอง ทำให้รายการที่อยู่ด้านล่างเลื่อนเข้ามาอยู่ในตำแหน่งเบื้องหน้าที่โดดเด่น
  • รายการจะ Snap-animate โดยใช้ Spring Animation เฉพาะไปยังตำแหน่งเบื้องหน้าเสมอหลังจากที่ท่าทางของผู้ใช้สิ้นสุดลง
  • รายการจะวางตำแหน่งตามแกน Z โดยรายการที่อยู่ไกลออกไปในรายการจะวางอยู่ด้านหลังรายการหลัก

การจัดการโฟกัส

VerticalStack ใช้ระบบโฟกัสเฉพาะเพื่อให้แน่ใจว่ารายการเบื้องหน้าปัจจุบันจะเป็นเป้าหมายหลักสำหรับการโต้ตอบของผู้ใช้เสมอ

  • โฟกัสเริ่มต้นและการกลับเข้า: โฟกัสเริ่มต้นและการกลับเข้าของโฟกัสจะไปที่ รายการบนสุดปัจจุบันของสแต็ก
  • การแจ้งเตือนโฟกัสอัตโนมัติ: เมื่อรายการเปลี่ยนไป สแต็กจะขอโฟกัส สำหรับรายการบนสุด
  • การติดตามโฟกัส: แต่ละรายการใช้ onFocusChanged เพื่อแจ้ง StackStateเกี่ยวกับสถานะโฟกัสของรายการนั้นๆ

ตัวอย่าง: สร้างสแต็กแนวตั้ง

โค้ดต่อไปนี้จะสร้างสแต็กแนวตั้งที่มีรายการการ์ด 2-3 รายการ

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}