本頁面由 Cloud Translation API 翻譯而成。

針對不同的螢幕大小進行開發
透過集合功能整理內容你可以依據偏好儲存及分類內容。

Compose for Wear OS Material 版本

您的應用程式應可在各種大小的 Wear OS 裝置上順利運作，善用可用的額外空間，並在小螢幕上呈現良好的效果。本指南將提供相關最佳做法，協助您打造這類使用者體驗。

如要進一步瞭解自動調整式版面配置的設計原則，請參閱設計指南。

使用 Material 3 建構回應式版面配置

版面配置應採用以百分比為依據的邊界。由於 Compose 預設會以絕對值運作，請使用 Horologist 程式庫中的 rememberResponsiveColumnPadding 計算邊框，然後將其傳遞至 ScreenScaffold 的 contentPadding 參數和 TransformingLazyColumn 的 contentPadding 參數。

以下程式碼片段使用 TransformingLazyColumn 元件，建立可在各種 Wear OS 螢幕大小上顯示的內容：

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}List.kt

本範例也會示範 ScreenScaffold 和 AppScaffold。這些資訊會在應用程式和個別畫面 (導覽路徑) 之間協調，確保正確的捲動行為和 TimeText 位置。

頂部和底部邊框間距方面，請注意下列事項：

第一和最後一個 ItemType 的規格，用於判斷正確的邊距。
使用 ListHeader 做為清單中的第一個項目，因為 Text 標頭不應有邊框。

如需完整規格，請參閱 Figma 設計套件。如需更多詳細資訊和範例，請參閱：

Horologist 程式庫：提供輔助程式，協助您打造經過最佳化且與眾不同的 Wear OS 應用程式。
ComposeStarter 範例：此範例說明本指南中列出的原則。
JetCaster 範例：這是較複雜的範例，說明如何使用 Horologist 程式庫，建構可支援不同螢幕尺寸的應用程式。

在應用程式中使用捲動版面配置

實作畫面時，請使用捲動版面配置 (如本頁先前所述) 做為預設選項。這樣一來，無論顯示偏好設定或 Wear OS 裝置螢幕大小為何，使用者都能存取應用程式的元件。

不同裝置大小和字型縮放比例的效果。

對話方塊

除非有非常充分的理由，否則對話方塊也應可捲動。 AlertDialog 元件為回應式，如果內容超過可視區域高度，則預設為可捲動。

自訂畫面可能需要非捲動版面配置

部分螢幕可能仍適合使用不捲動的版面配置。幾個例子包括媒體應用程式中的主播放器畫面，以及健身應用程式中的健身畫面。

在這種情況下，請參考 Figma 設計套件中提供的標準指南，並使用正確的邊界，實作可回應螢幕大小的設計。

透過中斷點提供不同的體驗

有了更大的螢幕，您可以推出更多內容和功能。如要實作這類差異化體驗，請使用螢幕大小中斷點，在螢幕大小超過 225 dp 時顯示不同的版面配置：

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...List.kt

設計指南進一步說明這些機會。

使用預覽畫面測試螢幕和字型大小組合

Compose 預覽畫面可協助您針對各種 Wear OS 螢幕大小進行開發。同時使用裝置和字型縮放預覽定義，即可查看下列內容：

在極端尺寸下，畫面會如何顯示，例如，最大字型搭配最小螢幕。
不同偵錯點的差異化體驗行為。

請務必使用 WearPreviewDevices 和 WearPreviewFontScales 為應用程式中的所有畫面實作預覽畫面。

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}List.kt

螢幕截圖測試

除了預覽測試之外，螢幕截圖測試還可讓您針對一系列現有硬體大小進行測試。在您無法立即取得這些裝置，且問題可能不會在其他螢幕大小上顯示的情況下，這項功能就特別實用。

螢幕截圖測試也有助於您找出程式碼集的特定位置出現的回歸現象。

我們的範例使用 Roborazzi 進行螢幕截圖測試：

設定專案和應用程式 build.gradle 檔案，以便使用 Roborazzi。
針對應用程式中的每個畫面建立螢幕截圖測試。舉例來說，在 ComposeStarter 範例中，系統會實作 GreetingScreen 的測試，如 GreetingScreenTest 所示：

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

請注意以下幾點：

WearDevice.entries 包含最熱門 Wear OS 裝置的定義，可在代表性範圍的螢幕大小上執行測試。

產生金標準圖片

如要為畫面產生圖片，請在終端機中執行下列指令：

./gradlew recordRoborazziDebug

驗證圖片

如要驗證現有圖片的變更，請在終端機中執行下列指令：

./gradlew verifyRoborazziDebug

如需螢幕截圖測試的完整範例，請參閱 ComposeStarter 範例。

針對不同的螢幕大小進行開發 透過集合功能整理內容 你可以依據偏好儲存及分類內容。