关于android:欢迎体验-Wear-OS-版-Compose-开发者预览版

作者 / 开发者关系工程师 Jeremy Walker

在往年的 Google I/O 大会 上，咱们发表将 Jetpack Compose 的优良个性引入 Wear OS。在顺利公布多个 alpha 版本之后，Wear OS 版 Compose 现已推出开发者预览版。

Compose 能 简化并减速 UI 开发，Wear OS 版 Compose 也是如此，借助内置的 Material You 反对，您能够用更少的代码构建更精美的利用。

除此之外，您在应用 Jetpack Compose 构建挪动利用的教训，也能够间接使用在 Wear OS 版本上。就像在挪动设施上一样，欢迎您立刻着手测试，咱们也心愿在公布 Beta 版前，将您的 反馈 纳入库的晚期迭代中。

本文将回顾咱们构建的几个次要可组合项，并介绍帮忙您开始应用的多种资源。

当初就开始吧！

依赖项

您对 Wear 设施作出的大部分更改都将位于顶部 架构分层。

这就意味着面向 Wear OS 设计时，您搭配 Jetpack Compose 应用的许多依赖项不会发生变化。例如，UI、运行工夫、编译器和动画依赖项都将放弃不变。

不过，您须要应用适合的 Wear OS Material、导航及根底开发库，这与您之前在挪动利用中所应用的开发库是不一样的。

下方是相干比照，可帮忙您辨别两者差别:

1. 开发者能够持续应用其余与 Material 相干的开发库，如 Material 涟漪和通过 Wear Compose Material 开发库进行扩大的 Material 图标。

只管从技术上说，能够在 Wear OS 上应用挪动依赖项，但咱们还是建议您应用专用于 Wear 的版本以获取最佳体验。

留神: 咱们将在将来版本中增加更多 Wear 可组合项。如果您认为有任何脱漏，欢送与咱们分享。

上面是一份示例 build.gradle 文件:

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    // Developer Preview starts with Alpha 07, with new releases coming soon.
    def wear_version = "1.0.0-alpha07"
    implementation "androidx.wear.compose:compose-material:$wear_version"
    implementation "androidx.wear.compose:compose-foundation:$wear_version"

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

    // Other dependencies...
}

在增加了正确的 Wear Material、根底及导航依赖项后，您就能够着手开始了。

可组合项

咱们来理解一些能够立刻着手应用的可组合项。

一般来说，许多相当于挪动版本的 Wear 可组合项可应用雷同代码。款式 色彩、排版及应用 MaterialTheme 的形态的代码亦如此。

例如，要创立 Wear OS 按钮，您的代码如下所示:

Button(modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    onClick = {/*...*/},
    enabled = enabledState
) {
    Icon(painter = painterResource(id = R.drawable.ic_airplane),
        contentDescription = "phone",
        modifier = Modifier
            .size(24.dp)
            .wrapContentSize(align = Alignment.Center),
    )
}

以上代码与挪动端代码十分相似，但该库创立了 Wear OS 优化版本的按钮，即由 ButtonDefaults) 确定大小的圆形按钮，以遵循 Wear OS Material 准则。

以下是开发库中一些可组合项的示例:

• 按钮
• 卡片
• 图标
• 文本

除此之外，咱们还引入了许多可晋升 Wear 体验的全新可组合项:

• Chip
• ToggleChip
• BasicCurvedText
• TimeText

咱们还为列表提供了一个针对 Wear 优化的可组合项 ScalingLazyColumn，扩大了 LazyColumn 并增加了缩放和透明度更改，以更好地反对圆形界面。您可在下方利用中看到，内容在屏幕顶部和底部被缩减和淡化，以进步可读性:

查看代码，您可看到代码与 LazyColumn 雷同，只是名称不同。

val scalingLazyListState: ScalingLazyListState = 
    rememberScalingLazyListState()

ScalingLazyColumn(modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    state = scalingLazyListState,
) {items(messageList.size) { message ->
        Card(/*...*/) {/*...*/}
    }

    item {Card(/*...*/) {/*...*/}
    }
}

滑动敞开

Wear 有本人的 Box 版本，即 SwipeToDismissBox。此版本增加了对开箱即用的滑动敞开手势的反对 (相似于挪动设施中的返回按钮 / 手势)。

上面是代码的一个简略示例:

// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()

SwipeToDismissBox(modifier = Modifier.fillMaxSize(),
    state = state
) { swipeBackgroundScreen ->

    // Can render a different composable in the background during swipe.
    if (swipeBackgroundScreen) {
        /* ... */
        Text(text = "Swiping Back Content")
    } else {
        /* ... */
        Text(text = "Main Content")
    }
}

上面是更为简单的一个示例:

导航

最初，咱们还提供了导航可组合项 SwipeDismissableNavHost，该可组合项与挪动设施中 NavHost 的工作原理很像，不过也反对开箱即用的滑动敞开手势 (理论在后盾应用 SwipeToDismissBox)。上面是一个示例 (代码)。

Scaffold

Scaffold 提供了布局构造，以帮忙您像挪动设施一样，用常见模式排列屏幕，但并非利用栏、悬浮操作按钮 (FAB) 或抽屉式导航栏等模式。Scaffold 可反对 Wear 专属布局，并提供工夫、曲线文本款式及滚动 / 地位指示器等顶层组件。

• TimeText
• 曲线文本款式
• PositionIndicator

这部分代码 与您在挪动利用上应用的代码十分相似。

开始应用吧！

咱们很快乐将 Jetpack Compose 引入 Wear OS，使手表开发更加快捷轻松。如要间接体验并创立利用，欢送查看咱们的 疾速入门指南。

若想查看可行示例 (简略与简单皆有)，您能够拜访 咱们的示例 repo:

您的反馈有助于咱们在开发者预览版中减少和改良 API，欢迎您向咱们 分享您的反馈，或 退出 Slack #compose-wear 频道与咱们分享！也欢迎您继续关注 “Android 开发者 ” 微信公众号理解更多最新内容。

欢迎您 点击这里 向咱们提交反馈，或分享您喜爱的内容、发现的问题。您的反馈对咱们十分重要，感谢您的反对！