使用可組合項預覽功能，預覽 Jetpack Compose Glimmer UI

適用的 XR 裝置
本指南可協助您為這類 XR 裝置打造體驗。
瞭解 XR 裝置類型 →
顯示型眼鏡
瞭解 XR 裝置類型 →

開發 Jetpack Compose Glimmer UI 時，請使用可組合項預覽功能，快速有效地視覺化及疊代設計。可組合項預覽功能可讓您直接在 Android Studio 中，即時互動式轉譯 Jetpack Compose Glimmer UI 元件。有了這些預覽畫面，您就不必在模擬器或實體裝置上，為每個微小的 UI 變更持續建構及執行應用程式，進而大幅加快開發週期。

預覽 Jetpack Compose Glimmer UI 元件

  1. 在 Android Studio 的最新 Canary 版本中開啟 XR 專案。
  2. 確認可組合函式已加上 @Preview 註解。

  3. 在「程式碼檢視」畫面中，按一下可組合函式的「預覽設定挑選器」。

  4. 在「裝置」下拉式選單中，選取「AI 眼鏡」。

    這會調整預覽介面，以符合顯示型眼鏡的獨特解析度和顯示比例。

    在可組合函式預覽設定中，選取「AI Glasses」做為裝置。

  5. 選取「Design」或「Split」檢視畫面，即可查看預覽畫面。

    可組合項預覽畫面會顯示在模擬顯示型眼鏡裝置的分割檢視畫面中。

調整預覽環境

眼鏡採用加法透明螢幕。這項特性代表螢幕只能增加光線，無法產生黑色。在加色顯示器上，黑色不是顏色，而是 100% 透明。Compose 預覽功能提供近似值，協助您瞭解 UI 在不同檢視條件下的行為。

如要模擬不同的觀看條件，請按一下預覽窗格工具列中的環境圖示。嘗試不同的背景選項 (例如「Light」、「Dark」或「Busy」)，確認文字和元件是否具有足夠的對比度和可見度。