关于android:使用-Compose-构建-Wear-OS-应用

实用于 Wear OS 的 Compose 已推出了开发者预览版，应用 Compose 构建 Wear OS 利用，不仅能够轻松遵循 Material You 指南，同时能够将 Compose 的长处施展进去。开箱即用，帮忙开发者应用更少的代码疾速构建出更精美的 Wear OS 利用。本文将通过 Wear Compose 次要的可组合项 (Composable) 来帮忙您更好地理解如何应用 Compose 来进行构建。

如果您更喜爱通过视频理解此内容，请点击此处查看。

△ 主利用界面和告诉界面

挪动利用往往须要针对多种不同的界面品种进行开发，通常状况下，承载利用的主界面由 Fragment、Activity 和 View 形成，而在 Compose 的世界中则是由可组合项形成，作为开发者您须要理解并适应这种变动。除此之外，您还要针对额定的告诉界面进行开发，这意味着您须要在主利用界面之外揭示用户留神某些重要信息，或让他们在启动主利用后持续实现刚刚执行的操作，例如跟踪跑步路线或者播放音乐。如果您应用了 Widget，也能够借助此类界面向用户提供信息。

△ Wear OS 中不同的利用界面

Wear OS 领有多种界面，在打造齐备的 Wear OS 利用体验时，须要您全副思考:

叠加层 (Overlay) 与挪动利用的主界面相似，之前由 Activity、View 和 Fragment 组成，当初由可组合项形成，非常适合流程较长或较为简单的交互；
告诉 (Notification) 界面同样合乎挪动利用开发准则；
简单性能 (Complication) 可在表盘中提供信息便于用户间接查看，用户只需在表盘上轻点一下，Complication 即可关上相关联的利用，或执行独立操作，例如饮水记录性能，记录您一天用水杯喝水的次数；
图块 (Tile) 提供了更多展现内容的空间，用户可在表盘上通过任意方向滑动，快速访问信息、执行操作。

本文咱们将着重介绍 Overlay 界面，并疾速演示几项 Wear 可组合项，理解它们的工作原理及其与挪动平台的相似之处。

在应用 Wear Compose 之前，咱们须要先确保已有正确的依赖项，它同挪动版 Compose 略有不同。在挪动版上，次要应用的依赖项有 Material、Foundation、UI、Runtime 和 Compiler，您还能够抉择应用 Navigation 和 Animation 依赖。但在 Wear 中，您能够应用一样的 UI 依赖项，Runtime、Compiler 和 Animation 也都是雷同的。此外，其余一些方面也都是雷同的，比方工具和一些 Compose 设计理念，比方应用双向数据流。

但还是有一些不同之处的，比方您须要应用 Wear Compose Material 替换 Material，单从技术上来说挪动版 Material 也是能够间接用的，但它并没有针对 Wear 的一些个性进行优化，相似的咱们还举荐您应用 Wear Navigation 来替换 Navigation。

尽管咱们倡议间接应用 Wear Compose Material，但您依然能够应用 Material Ripple 和 Material Icons Extended 等。在增加正确的 Wear 依赖项后，您就能够着手进行开发了。

在 Wear Compose 文档页面查看依赖项。

Compose Wear OS Material 库提供了很多与挪动平台上雷同的可组合项，您能够替换 Material 主题，并且自定义色彩、字体等，不同的是它们都针对手表进行了优化。接下来咱们就为您介绍一些罕用的可组合项。

Button

Button 属于紧凑的界面元素，用户可通过点按 Button 执行操作或做出抉择。

通过如下代码可轻松增加 Button，尽管款式与挪动版不同，但代码一样。咱们在代码里初始化了一个 Button 可组合项，而后申明了一些参数，它们被称为 Modifier，通过 Modifier 能够更改很多属性，比方这里的 onClick、same、enabled，若您还想为 Button 增加一个图标，那就须要用到蕴含 painter、contentDescription 和 modifier 的 Icon 可组合项:

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

△ Button 可组合项代码

通过上述代码，咱们能够创立精美玲珑的 Button，显示成果如下:

△ Button 代码成果

Card

Card 可针对繁多主题的内容和操作进行出现，非常灵便。

如图左侧 Card 展现了一些图标和文字，两头界面只保留了文字，右侧应用了一张图片作为背景。

△ Card 用例

在 Wear OS 中，次要有 AppCard 和 TitleCard 两种 Card，TitleCard 更偏重文字展现，本文咱们将着重介绍 AppCard。如下示例代码创立了一个 AppCard，并相继通过 Image、Text 和 Column 定制内容:

AppCard(
    appImage = {Image(painter = painterResource(id = R.drawable.ic_message), …)
    },
    appName = {Text ("Messages") },
    time = {Text ("12m") },
    title = {Text("Kim Green") },
    onClick = {…},
    body = {Column(modifier = Modifier.fillMaxWidth()) {Text("On my way!")
        }
    },
)

△ Card 可组合项代码

通过上述代码，咱们创立出了一个精美的 Card，显示成果如下:

△ Card 代码成果

如需取得不同外观的精美卡片显示成果，仅需对代码进行轻微调整即可。

Chip

Chip 旨在实现快捷的一键操作，对屏幕空间无限的 Wear 设施尤其有用，各种 Chip 变体也能让您纵情挥洒创意。

上面是实现 Chip 可组合项的代码和实现成果，您会发现它非常易用，同上述的一些代码也大抵类似:

Chip(modifier = Modifier.align(Alignment.CenterHorizontally),
    onClick = {…},
    enabled = enabledState,
    label = {
        Text(
            text = "1 minute Yoga",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    },
    icon = {
        Icon(painter = painterResource (id = R.drawable.ic_yoga),
            contentDescription= "yoga icon",
            modifier = Modifier
                .size(24.dp)
                .wrapContentSize(align = Alignment.Center),
        )
    },
)

△ Chip 可组合项代码

△ Chip 代码成果

ToggleChip

ToggleChip 和 Chip 相似，区别是用户应用单选按钮、切换开关、复选框:

如下所示 ToggleChip 用例:

△ ToggleChip 用例

图左展现，只需轻点即可开关声音；图右则对 ToggleChip 进行了拆分，提供了两个不同的可点击区域，通过右侧按钮可将其敞开，点击左侧能够进入利用以便对闹钟进行编辑。其代码大同小异:

ToggleChip(modifier = Modifier.height(32.dp)
    checked = checkedState,
    onCheckedChange = {…}
    label = {
        Text(
            text = "Sound",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
)

△ ToggleChip 代码

△ ToggleChip 代码成果

CurvedText 和 TimeText

CurvedText 专门针对了圆形屏幕进行了优化，这对圆形设施来说十分重要，而 TimeText 是基于 CurvedText 所创立的可组合项，它为您解决工夫方面的所有文字显示工作。

如下代码示例展现了如何创立 TimeText，并以 CurvedText 的形式进行展现:

var textBeforeTime by rememberSaveable {mutableStateOf("ETA 99 hours") }
// 首先创立在工夫之前显示的前缀字符串
TimeText(  
// 创立 TimeText 可组合项
    leadingCurvedContent = {
        BasicCurvedText(
            text = textBeforeTime,
            style = TimeTextDefaults.timeCurvedTextStyle())
    },
// 指定 leadingCurvedContent，在工夫文本前显示文字，以 CurvedText 的形式在曲面设施上展现。leadingLinearContent = {
        Text(
            text = textBeforeTime,
            style = TimeTextDefaults.timeTextStyle())
    },
// 指定 leadingLinearContent，在工夫文本前显示文字，惯例显示，实用于非曲面设施。）

△ TimeText 代码

通过上述代码，咱们能够看到工夫文本在圆形屏幕的显示成果如下:

△ TimeText 显示成果

ScalingLazyColumn

列表简直是每个利用中都会用到的组件，它纵向展现了间断的界面元素。但因为 Wear OS 手表设施的屏幕顶部和底部空间都十分小，因而 Material Design 引入了新的 ScalingLazyColumn 来进行缩放和透明度的展现，这样有助于您在较小的空间内查看列表的内容。

△ ScalingLazyColumn 显示成果

上图展现了 ScalingLazyColumn 的成果，您能够看到随着列表内元素的滑入，当列表的某一行凑近核心地位时，会放大到残缺尺寸，而随着该元素的滑出，会变得越来越小 (并且变得更通明) 直至齐全隐没，这种成果非常有利于内容的展现，内容更易于用户浏览。

ScalingLazyColumn 底层是由 LazyColumn 实现的，它只会对行将要在屏幕上出现的内容进行解决，这样可能高效地解决大量数据，且可能以缩放和通明成果进行展现，因而它应该成为 Wear OS 的默认组件。

如上成果，ScalingLazyColumn 代码示例如下:

val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState()
 
ScalingLazyColumn(modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    state = scalingLazyListState,
) {items(messageList.size) { message ->
        Card(...) {...}
    }
    item {Card(...) {...}
    }
}

△ ScalingLazyColumn 示例代码

SwipeToDismissBox

这是大家非常相熟的 Box 组件被视为界面中的一个容器，可在挪动端应用，但 Wear 中有专属版本 SwipeToDismissBox，可用于您的布局，顾名思义它的性能是滑动以敞开。在 Wear OS 中，次要的手势就是滑动，通过应用 SwipeToDismissBox 向右滑动，就相当于点击了 “ 返回 ” 按钮。

val state = rememberSwipeToDismissBoxState()
 
SwipeToDismissBox(state = state,){ isBackground ->
    if (isBackground) {Box(modifier = Modifier. fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ){Text ("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}

△ SwipeToDismissBox 示例代码

在上述代码中，咱们为 SwipeToDismissBox 设置了 state 属性，这一点和挪动端不同。通过传递的 state 获取到 isBackground 回调值，它代表了此过程是否是滑动返回，您能够依据不同的状态展现不同的内容。下图是最终的出现成果:

△ SwipeToDismissBox 代码成果

至此，咱们介绍了一些 Wear OS 的可组合项，若您对挪动端的可组合项开发有所理解，您可能会发现在 Wear OS 中开发根本是一样的，换句话说，您之前学习 Compose 时把握的常识能够间接用于 Wear OS 开发。

Scaffold 可让您实现具备根本 Material Design 布局构造的界面，它可为最常见的顶层 Material 组件 (例如 TopBar、BottomBar、FloatingActionButton 和 Drawer) 提供槽位。应用 Scaffold 时，您能够确保这些组件可能正确搁置并协同工作。而在 Wear OS 中，它也有着专属的版本，除了同挪动版雷同的 content 组件之外，额定提供了以下三个次要组件:

△ Wear Scaffold 中的三个次要组件

TimeText: 能够将工夫置于屏幕的顶部，咱们曾经介绍过它，具体请参考上文中对于 TimeText 的局部；
Vignette: 可在屏幕四周为您提供丑陋的晕影成果，如上图中所示；
PositionIndicator: 也称为滚动指示器，是屏幕右侧的批示符，用于依据您传入的状态对象类型显示以后批示符的地位。将它搁置于 Scaffold 中是因为屏幕是弧形的，因而地位指示器须要位于表盘地方 (Scaffold)，而不仅仅是在视口 (viewport) 地方。否则，指示器可能会被截断。

Scaffold 设计

△ Scaffold 设计层级

在进行 Scaffold 的设计时，请参考上图中的层级程序进行思考，首先要做的是对 App 进行设置，其次是设置 MaterialTheme 来自定义一些利用的外观和格调，紧接着是思考如何搁置 Scaffold，最初才是对 Content 的定义。这个程序同在挪动端是一样的，先思考设置 Theme，再到 Scaffold，接下来看一下如何编写代码:

// positionIndicator 在 Content 之外，因而要将 state 晋升到 Scaffold 之上的级别
val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState()
 
MaterialTheme {
    Scaffold(modifier = Modifier.fillMaxSize(),
        timeText = {...},
        vignette = { 
            Vignette (vignettePosition = 
                VignettePosition.TopAndBottom)
        },
        positionIndicator = {
            // 通过查看 state 来判断是否处于滚动状态，若否，则不会进行展现
            if (scalingLazyListState.isScrollInProgress) {
                // PositionIndicator 须要用到 state，这也是咱们从 LazyColumn 晋升状态的次要起因
                PositionIndicator(scalingLazyListState =
                    scalingLazyListState)
            }
        }
    ) {
        // 设置 content
        …
    }
}

△ Scaffold 示例代码

上述代码中，因为 positionIndicator 位于 content 之外，因而要将 state 晋升到 Scaffold 之上的级别，来防止它在屏幕中被截断。而在滚动时，能够通过查看滚动状态，通过暗藏工夫显示来为屏幕留出更多的空间，还能够依据状态来敞开或关上 vignette 成果。positionIndicator 反对多种滚动选项，本例中咱们应用了 scalingLazyListState，还能够应用很多成果炫酷的其余选项，具体请参考相干文档。而对于 modifier 和 TimeText 想必不必过多介绍了，而 vignette 的设置其实也很简略。

在本文一开始就提到您须要应用 Wear Navigation 依赖项来替换 Navigation，这里再次强调一下，从技术层面来说您仍可应用 Navigation，然而可能会遇到各种问题，所以还是建议您间接应用已针对 Wear 优化的 Wear Navigation。

△ Navigation 设计

对于 Navigation 的设计，同 Scaffold 大致相同，采纳了和挪动版雷同的设计，只是在 Scaffold 之下和 Content 之上减少了 SwipeDismissableNavHost，顾名思义该组件反对滑出操作，您能够间接应用与挪动利用开发雷同的常识来编写代码。

MaterialTheme {Scaffold(...){val navController = rememberSwipeDismissableNavController()
 
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = Screen.MainScreen.route
        ) {composable(route = Screen.MainScreen.route){MyListScreen(...)
            }
            composable(route = Screen.DetailsScreen. route + "/{$ID}", ...) {MyDetailScreen(...)
            }
        }
    }
}

△ Navigation 示例代码

在上述代码中，MaterialTheme 和 Scaffold 与之前一样，但咱们创立了一个 navController，并应用了 SwipeDismissable 版本的 rememberSwipeDismissableNavController，名称十分拗口，然而很容易了解它的性能。而后应用了 SwipeDismissableNavHost 将 startDestination 及其门路传递到控制器中，再设置主屏幕内容即可。您会发现代码基本上同挪动端雷同，十分便于了解。

在 Wear OS 中，请确保应用适合的依赖项，替换 Material 并增加 Foundation 依赖，如果应用的是 Navigation 同样也要进行替换。另外，所有 Compose 构建方面的常识都能够间接利用于 Wear Compose 中，用挪动端的开发教训助您疾速构建精美的 Wear 界面。

如需理解更多详细信息，请参阅:

欢送体验 | Wear OS 版 Compose 开发者预览版
Wear OS 概览
文档指南: 在 Wear OS 上应用 Jetpack Compose
Codelab: 开始编写实用于 Wear OS 的利用
GitHub 示例

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

关于android:使用-Compose-构建-Wear-OS-应用

增加依赖项

Wear OS Material 库介绍

应用 Scaffold

Navigation

总结

Just My Socks（注册教程内含优惠码）

关于android:使用-Compose-构建-Wear-OS-应用

增加依赖项

Wear OS Material 库介绍

应用 Scaffold

Navigation

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）