Material Design cung cấp các thành phần và bố cục thích ứng với XR. Khi sử dụng thư viện Material 3 hiện có, các thành phần và bố cục thích ứng sẽ được cải thiện bằng các hành vi giao diện người dùng không gian.
Bạn có thể điều chỉnh cách triển khai M3 hiện tại bằng cách thêm trình bao bọc EnableXrComponentOverrides. Thêm thư viện XR Compose Material3 vào phần phụ thuộc của ứng dụng.
Sử dụng EnableXrComponentOverrides để điều chỉnh ứng dụng hiện có
Tất cả giao diện người dùng Compose M3 bên trong trình bao bọc EnableXrComponentOverrides sẽ thích ứng trên các thiết bị XR. Trình bao bọc này cho phép bạn chọn bất kỳ thành phần nào mà bạn muốn loại trừ khỏi hành vi này.
Thêm trình bao bọc EnableXrComponentOverrides để điều chỉnh ứng dụng cho phù hợp với Material Design cho XR.
Dải điều hướng
Dải điều hướng trong bất kỳ bố cục Compose nào, bao gồm cả NavigationSuiteScaffold, sẽ tự động điều chỉnh cho phù hợp với XR Orbiter. Để biết thêm thông tin, hãy đọc Nguyên tắc thiết kế Material Design.
Dải điều hướng không theo không gian
Dải điều hướng không gian (được điều chỉnh cho XR)
Thanh điều hướng
Thanh điều hướng trong bất kỳ bố cục Compose nào, bao gồm cả NavigationSuiteScaffold, sẽ tự động điều chỉnh cho phù hợp với vệ tinh XR. Để biết thêm thông tin, hãy đọc Nguyên tắc thiết kế Material Design.
Thanh điều hướng không theo không gian
Thanh điều hướng không gian (được điều chỉnh cho XR)
Hộp thoại
BasicAlertDialog sẽ thích ứng với XR, thêm độ cao vào thành phần.
Tìm hiểu thêm về Hộp thoại và nguyên tắc thiết kế thích ứng.
Hộp thoại không theo không gian
Hộp thoại không gian (được điều chỉnh cho XR)
Thanh ứng dụng trên cùng
TopAppBar sẽ tự động điều chỉnh cho phù hợp với vệ tinh XR.
Tìm hiểu thêm về Thanh ứng dụng trên cùng và nguyên tắc thiết kế thích ứng.
Thanh ứng dụng trên cùng không được không gian hoá
Thanh ứng dụng trên cùng được tạo không gian (được điều chỉnh cho XR)
Bố cục danh sách-chi tiết cho XR
Bố cục thích ứng Compose Material 3 trong XR có mối liên kết 1:1, trong đó mỗi ngăn được đặt bên trong bảng điều khiển không gian XR riêng. Tìm hiểu thêm về ListDetailPaneScaffold và nguyên tắc thiết kế thích ứng.
ListDetailPaneScaffold không gian
ListDetailPaneScaffold không gian (được điều chỉnh cho XR)
Bố cục ngăn hỗ trợ cho XR
Bố cục thích ứng Compose Material 3 trong XR có mối liên kết 1:1, trong đó mỗi ngăn được đặt bên trong bảng điều khiển không gian XR riêng. Tìm hiểu thêm về SupportingPaneScaffold và nguyên tắc thiết kế thích ứng.
SupportingPaneScaffold không gian hoá
SupportingPaneScaffold được không gian hoá (được điều chỉnh cho XR)
Bắt đầu thiết kế bằng Bộ công cụ thiết kế Material 3 cho Figma
Tải Bộ thiết kế Material 3 xuống để bắt đầu
Xem thêm
- Phát triển giao diện người dùng bằng Jetpack Compose cho XR
- Nguyên tắc thiết kế giao diện người dùng không gian