Material Design มีคอมโพเนนต์และเลย์เอาต์ที่ปรับให้เหมาะกับ XR การใช้ไลบรารี Material 3 ที่มีอยู่จะปรับปรุงคอมโพเนนต์และเลย์เอาต์แบบปรับอัตโนมัติด้วยลักษณะการทํางานของ UI แบบพื้นที่
คุณสามารถปรับการใช้งาน M3 ในปัจจุบันได้โดยการเพิ่ม EnableXrComponentOverrides
wrapper
ใช้ EnableXrComponentOverrides เพื่อปรับแอปที่มีอยู่
UI ของ M3 Compose ทั้งหมดใน Wrapper EnableXrComponentOverrides
จะปรับให้เหมาะกับอุปกรณ์ XR Wrapper นี้ช่วยให้คุณเลือกคอมโพเนนต์ที่ต้องการยกเว้นจากลักษณะการทํางานนี้ได้
เพิ่ม EnableXrComponentOverrides
wrapper เพื่อปรับแอปให้เหมาะกับ Material Design สำหรับ XR
แถบข้างสำหรับไปยังส่วนต่างๆ
แถบนําทางในเลย์เอาต์การเขียนใดๆ รวมถึง NavigationSuiteScaffold
จะปรับให้เข้ากับ XR Orbiter โดยอัตโนมัติ อ่านข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์ Material Design


แถบนำทาง
แถบนําทางในเลย์เอาต์การเขียนใดก็ตาม รวมถึง NavigationSuiteScaffold
จะปรับให้เหมาะกับ Orbiter ของ XR โดยอัตโนมัติ อ่านข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์ Material Design


เลย์เอาต์แบบรายการแบบละเอียดสำหรับ XR
เขียนเลย์เอาต์แบบปรับเปลี่ยนได้ของ Material 3 ใน XR มีการแมปแบบ 1:1 โดยที่แต่ละแผงจะวางไว้ภายในแผงเชิงพื้นที่ XR ของตนเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับ ListDetailPaneScaffold
และหลักเกณฑ์การออกแบบที่ปรับเปลี่ยนได้


เลย์เอาต์แผงการสนับสนุนสำหรับ XR
เขียนเลย์เอาต์แบบปรับเปลี่ยนได้ของ Material 3 ใน XR มีการแมปแบบ 1:1 โดยที่แต่ละแผงจะวางไว้ภายในแผงเชิงพื้นที่ XR ของตนเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับ SupportingPaneScaffold
และหลักเกณฑ์การออกแบบที่ปรับเปลี่ยนได้


เริ่มออกแบบด้วยชุดเครื่องมือการออกแบบ Material 3 สำหรับ Figma
ดาวน์โหลดชุดเครื่องมือการออกแบบ Material 3 เพื่อเริ่มต้นใช้งาน