前言

    Compose 除了可以適用在大折疊手機上，也可以 Wear OS 上跑哦 

Compose for Wear OS 的優勢

• 宣告式 UI: 透過描述 UI 的狀態來構建 UI，更直觀、易於理解。
• 熱重載: 修改程式碼後，UI 能夠即時更新，加快開發速度。
• Material Design 3 支援: 內建 Material Design 3 支援，可快速打造符合 Google 設計規範的 UI。
• 專為 Wear OS 優化: 提供了許多專為 Wear OS 設計的可組合函式，例如 ScalingLazyColumn、Scaffold 等，方便開發者快速上手。

開始使用 Compose for Wear OS

Jetpack Compose 工具包依附元件

dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    implementation "androidx.wear.compose:compose-material:$rootProject.wearVersion"
    implementation "androidx.wear.compose:compose-foundation:$rootProject.wearVersion"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$rootProject.wearVersion"

    // Other dependencies...
}

用 Android Studio 開新專案 -> Wear OS -> Empty Wear App With Title ...

@Composable
fun WearApp(greetingName: String) {
    MyWatchTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background),
            contentAlignment = Alignment.Center
        ) {
            TimeText()
            Greeting(greetingName = greetingName)
        }
    }
}

@Composable
fun Greeting(greetingName: String) {
    Text(
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center,
        fontSize = 24 .sp,
        color = Color.White,
        text = stringResource(R.string.hello_world,greetingName)
    )
}

Preview

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun DefaultPreview() {
    WearApp("Preview My Pixel Watch")
}

執行結果

心得

看到程式碼是不是跟app寫法一樣呢?
這樣寫完app，就可以順便 連 Wear OS 一起寫完呀