18.srt

1
00:00:08,800 --> 00:00:12,721
大家好  我是 Wear OS 部门的产品经理 Maia Conrado
Hi, I’m Maia Conrado, and I am a product manager for Wear OS.

2
00:00:12,804 --> 00:00:14,431
今天我们要与大家分享
Today we will talk to you

3
00:00:14,515 --> 00:00:17,643
我们推出的 Wear OS 的 Compose 开发者预览版
about the new Developer Preview of Compose for Wear OS.

4
00:00:17,726 --> 00:00:20,145
具体来说  我们将介绍这一版本
Specifically, we’ll walk through what’s similar,

5
00:00:20,229 --> 00:00:23,398
变化和新增功能
what’s different, and what’s new in this version of Compose

6
00:00:23,482 --> 00:00:26,777
以便您以更少的代码快速开发精美应用
so you can quickly develop your own beautiful apps with less code.

7
00:00:27,319 --> 00:00:30,614
Wear OS 版 Compose 可提供诸多帮助
There are many reasons why Compose for Wear OS will be helpful.

8
00:00:30,697 --> 00:00:34,743
组件遵循 Material You 指南  开箱即可使用
The components are compliant with Material You guidelines out of the box,

9
00:00:34,826 --> 00:00:37,788
这意味着您能轻松遵循设计指南进行设计
meaning you can more easily follow the Design guidelines.

10
00:00:37,871 --> 00:00:42,209
自我们在 I/O 大会做出预告后目前已发布了 Wear OS 的 Compose
Compose for Wear OS is currently in Alpha and has released a number of updates

11
00:00:42,292 --> 00:00:43,835
Alpha 版和几项更新
since we teased it at I/O.

12
00:00:44,086 --> 00:00:47,965
我们现在准备发布开发者预览版  并想听取来自您的反馈
We are now ready for a Developer Preview and want to incorporate your feedback

13
00:00:48,048 --> 00:00:51,510
并在早期的 Beta 版迭代中进行采纳
into the early iterations of the libraries before the beta release.

14
00:00:51,593 --> 00:00:55,597
我们希望在进行此类对话之前您对 Compose 有所了解
We expect you to have some of knowledge about Compose as we go through this talk.

15
00:00:55,681 --> 00:00:58,058
如果您对此一无所知  也不要担心
Don’t worry if you don’t understand everything.

16
00:00:58,141 --> 00:01:01,520
我们将会在视频最后提供资源供您按照自己的进度学习
We’ll have resources at the end to help you learn at your own pace.

17
00:01:01,603 --> 00:01:04,398
但在我们深入探究 Compose 之前
But, before we can dive into Compose itself,

18
00:01:04,481 --> 00:01:06,942
我们先简要谈谈 Wear OS
let’s talk at a higher level about the differences

19
00:01:07,025 --> 00:01:09,611
和 Android 移动应用开发的不同之处
between Wear OS and Android mobile development

20
00:01:09,695 --> 00:01:12,155
以防有人还不熟悉 Wear OS
for any of you not familiar with Wear OS.

21
00:01:12,781 --> 00:01:16,076
回顾一下  我们最近发布了该平台的新版本
As a recap, we recently launched a new version of the platform

22
00:01:16,159 --> 00:01:19,413
对 Wear OS 的体验做出了一些重大改进
with some major improvements to the Wear OS experience.

23
00:01:19,496 --> 00:01:23,917
但 Wear OS 新版本仍以 Android 为基础  这一点没有改变
But that didn’t change the fact that the new version of Wear OS is based on Android,

24
00:01:24,001 --> 00:01:26,545
而且和以前一样  针对腕部设备进行了优化
as before, and is optimized for the wrist.

25
00:01:27,170 --> 00:01:29,256
移动版 Compose 的其中一项优势是
One of the benefits of Compose for mobile

26
00:01:29,339 --> 00:01:33,302
适用于 Android 的多个版本和多个 API 级别
is that it works across many versions and API levels of Android.

27
00:01:33,385 --> 00:01:37,139
同样  Wear OS 版 Compose 也适用于 Wear OS 3
Similarly, Compose for Wear OS will work on Wear OS 3,

28
00:01:37,222 --> 00:01:41,351
API 级别 30  此外还适用于 Wear OS 2 手表
which is API level 30 but also on the Wear OS 2 watches out there.

29
00:01:41,893 --> 00:01:46,398
同移动版一样  Wear OS 版 Compose 也属于 Jetpack 库的一部分
And, just like mobile, Compose for Wear OS is part of the Jetpack library,

30
00:01:46,481 --> 00:01:49,401
就像您使用的其他 Wear Jetpack 库一样
and just like the other Wear Jetpack libraries you use,

31
00:01:49,484 --> 00:01:51,069
可帮助您编写更高质量的代码
it helps you write better code.

32
00:01:51,153 --> 00:01:54,031
我们简单看看某些
But let's look a little higher at some of the fundamentals

33
00:01:54,114 --> 00:01:55,824
Wear OS 应用的基础架构
of Wear OS app architecture.

34
00:01:56,450 --> 00:01:59,578
您可能没有意识到  但当您开发移动应用时
You may not realize it, but when you are developing for mobile,

35
00:01:59,661 --> 00:02:02,247
就会发现一个应用往往要针对多种不同的界面种类进行开发
you are actually targeting more than one

36
00:02:02,331 --> 00:02:04,082
最常用的是承载主应用的界面
First, the app surface,

37
00:02:04,166 --> 00:02:08,670
在旧版本它由 Fragment  Activity 和 View 构成
which in the old world has UI powered by fragments, activities, and views.

38
00:02:08,754 --> 00:02:12,758
在 Compose 的世界中则由可组合项 (Composable) 构成
In the new world of Compose, the UIs are powered by composables.

39
00:02:12,841 --> 00:02:15,052
因此您要了解并适应这种变化
So you know all that and are used to that.

40
00:02:15,135 --> 00:02:20,557
此外  您还要针对额外通知界面进行开发
You are also developing for another surface, notifications, and that’ll be when you want

41
00:02:20,641 --> 00:02:24,353
这就意味着您需要在并在主应用界面之外提醒用户注意某些重要信息
to alert your user of some important information outside of your app,

42
00:02:24,436 --> 00:02:27,397
或让他们启动主应用后继续完成刚刚执行的操作
or let them continue something they started in your app,

43
00:02:27,481 --> 00:02:29,900
例如跟踪跑步路线或播放音乐
like tracking a run or playing music.

44
00:02:29,983 --> 00:02:32,194
最后  如果您使用了 Widget
Finally, if you’re using widgets,

45
00:02:32,277 --> 00:02:35,572
也可借此种类的界面向用户提供信息
that’s another surface where you can provide information to users.

46
00:02:36,156 --> 00:02:39,368
Wear OS 也包含多个种类的界面
Wear OS is similarly comprised of multiple surfaces

47
00:02:39,451 --> 00:02:43,538
在打造完备的 Wear OS 应用体验时您需要全部考虑到
that you would want to target when creating a full-fledged Wear OS app experience.

48
00:02:44,081 --> 00:02:47,668
首先是 Overlay  基本类似于移动应用
First is the overlay, which is basically just like the app on mobile,

49
00:02:47,751 --> 00:02:50,837
之前由 Activity  View 和 Fragment 组成
previously composed of activities, views, and fragments,

50
00:02:50,921 --> 00:02:52,589
现在由可组合项组成
but now by composables.

51
00:02:52,673 --> 00:02:55,926
非常适合流程较长或较为复杂的交互
It is well suited for longer or more complex interactions.

52
00:02:56,510 --> 00:03:00,555
Notification 界面同样符合移动应用开发准则
Notifications also follow the same principles as mobile development.

53
00:03:00,639 --> 00:03:04,059
然后是两个新的界面种类  首先是 Complication
Then there are two new surfaces, complications,

54
00:03:04,142 --> 00:03:08,855
可直接在表盘中提供信息便于用户直接查看
which provide predictable, glanceable access to information directly from the watch face.

55
00:03:08,939 --> 00:03:13,360
当点按时 Complication 通常会直接打开相应的应用
When tapped, complications usually direct to the corresponding app experience.

56
00:03:13,443 --> 00:03:16,780
但是 Complication 也能执行独立操作
However, they can also perform a self-contained action,

57
00:03:16,863 --> 00:03:18,699
例如记录喝水量的功能
like a water count complication,

58
00:03:18,782 --> 00:03:21,493
能记录您在一天内使用水杯喝水的次数
to change the number of glasses you had during the day.

59
00:03:21,576 --> 00:03:24,162
最后 Tile 界面提供了更多展示内容的空间
Finally, tiles give users fast access

60
00:03:24,246 --> 00:03:27,708
可让用户在表盘上向任意方向滑动
to information and actions, with more space to display content.

61
00:03:27,791 --> 00:03:31,253
即可快速访问信息和执行操作
They are reachable by swiping in either direction from the watch face.

62
00:03:31,962 --> 00:03:34,840
在本次课程中  我们着重介绍 Overlay
But for this session, we are focusing on overlays,

63
00:03:34,923 --> 00:03:36,675
等同于手机上的应用
or the phone equivalent of an app,

64
00:03:36,758 --> 00:03:40,595
因为这里全部都是 View 或者在本例中为可组合项
as this is where all of the views, or in this case, composables will live.

65
00:03:41,471 --> 00:03:42,889
进入正题
Now onto the good stuff.

66
00:03:42,973 --> 00:03:45,475
在深入探究更复杂的可组合项之前
We’ll quickly demo a number of Wear composables

67
00:03:45,559 --> 00:03:49,187
我们将快速演示几项 Wear 可组合项
to give you an idea of how they work and how they are similar to mobile

68
00:03:49,271 --> 00:03:51,940
让您了解它们的工作原理及与移动平台的相似之处
before diving into more complex composables.

69
00:03:52,023 --> 00:03:54,484
但在介绍可组合项之前
But, before we can cover any composables,

70
00:03:54,568 --> 00:03:57,154
我们必须确保已有正确的依赖项
we need to make sure we have the right dependencies,

71
00:03:57,237 --> 00:04:00,991
这里的依赖项与移动版 Compose 略有不同
and the dependencies are going to be a little different from mobile Compose.

72
00:04:01,074 --> 00:04:02,701
我们首先看看移动版
Let's look at mobile first.

73
00:04:02,784 --> 00:04:05,704
在移动版上  主要依赖项如下
On mobile, you have the main set of dependencies:

74
00:04:05,787 --> 00:04:10,375
Material  FoundationUI  Runtime  Compiler
Material, Foundation, UI, Runtime, Compiler,

75
00:04:10,459 --> 00:04:13,837
您还可以选择 Navigation 和 Animation
and optionally, you have Navigation and Animation.

76
00:04:13,920 --> 00:04:15,255
那么 Wear 中是怎样的呢
Well, what about Wear?

77
00:04:15,338 --> 00:04:17,466
首先  我们探讨二者的相同之处
First, let’s talk about what’s the same.

78
00:04:18,175 --> 00:04:22,471
在 Wear 版上  您可与移动版一样使用相同的 UI Compose 依赖项
On Wear you can use the same UI Compose dependency as you would in mobile,

79
00:04:22,554 --> 00:04:26,641
并且 Runtime  Compiler 和 Animation 依赖项也都相同
and the Runtime, Compiler, and Animation dependencies are all the same.

80
00:04:27,267 --> 00:04:29,352
此外  其他很多方面也是相同的
A lot of the other stuff is the same too,

81
00:04:29,436 --> 00:04:33,648
例如工具和一些 Compose 设计理念  比如使用双向数据流等
like the tools and the Compose philosophy, like data down, events up.

82
00:04:33,732 --> 00:04:35,650
那不同之处呢
Okay, so what’s different?

83
00:04:35,734 --> 00:04:39,571
首先使用 Wear Compose Material 替换 Material
First, replace Material with Wear Compose Material.

84
00:04:39,654 --> 00:04:42,574
虽然从技术上来说可以使用移动版 Material
While it’s technically possible to use the mobile Material,

85
00:04:42,657 --> 00:04:45,911
但该版本没有针对 Wear 和 Wear 的独特要求进行过优化
it is not optimized for Wear and Wear's unique requirements.

86
00:04:45,994 --> 00:04:49,456
因此我们建议您一律使用 Wear 同等组件来替代
So we always recommend you replace it with the Wear equivalent.

87
00:04:49,539 --> 00:04:53,084
您仍可使用其他 Material 依赖项
The other Material dependencies outside of that can still be used.

88
00:04:53,168 --> 00:04:57,506
例如  您可使用 Material Ripple 和 Material Icons Extended
For example, you can use Material Ripple and Material Icons Extended.

89
00:04:58,048 --> 00:05:00,926
接下来添加 Wear Foundation 依赖项
Next, include the Wear Foundation dependency.

90
00:05:01,009 --> 00:05:02,093
这是一个附加项
This one’s additive,

91
00:05:02,177 --> 00:05:05,680
您可将其与移动版 Foundation 依赖项结合使用
so you can use it with the mobile Foundation dependency if you want to.

92
00:05:06,890 --> 00:05:08,975
最后  如果您使用的是 Navigation
Finally, if you are using Navigation,

93
00:05:09,059 --> 00:05:11,394
请用同等依赖项来替换
replace it with the Wear Navigation equivalent,

94
00:05:11,478 --> 00:05:13,522
理由同 Material
for the same reasons as Material.

95
00:05:13,605 --> 00:05:15,565
这是针对手表优化过的
It's optimized for the watch.

96
00:05:15,649 --> 00:05:17,275
现在 Jeremy 将向您介绍 Wear Material
Now, Jeremy is going to walk you

97
00:05:17,359 --> 00:05:20,779
以便您查找我们提供的众多新的可组合项
through Wear Material where many of our new composables can be found.

98
00:05:22,280 --> 00:05:24,074
大家好  我叫 Jeremy Walker
Hi, my name is Jeremy Walker,

99
00:05:24,157 --> 00:05:26,576
是 Google 开发者关系工程师
and I’m a Developer Relations Engineer at Google.

100
00:05:26,660 --> 00:05:30,831
Compose Wear OS Material 库提供了很多相同的可组合项
The Compose Wear OS Material library offers many of the same composables

101
00:05:30,914 --> 00:05:33,959
与您在移动平台上惯用的依赖项相同不过针对手表进行了优化
you’ve grown used to on mobile but optimized for the watch.

102
00:05:34,042 --> 00:05:36,837
与移动端一样您可以替换 Material Theme
And, as with mobile, you can override the Material Theme

103
00:05:36,920 --> 00:05:40,674
并自定义颜色  字体和形状
and customize your colors, typographies, and shapes.

104
00:05:40,757 --> 00:05:43,718
我们首先来深入探究 Wear 可组合项
Let’s dive into our first Wear composable.

105
00:05:43,802 --> 00:05:46,012
Button 属于是紧凑类型的界面元素
All right, buttons are compact elements

106
00:05:46,096 --> 00:05:49,891
可让用户通过点按执行操作和做出选择
that allow users to take actions and make choices with a single tap.

107
00:05:49,975 --> 00:05:52,018
下面是几个示例
Here are a couple of examples.

108
00:05:52,102 --> 00:05:55,730
虽然这些看起来与移动版不同但代码其实是相同的
While these look different from mobile, the code is actually the same.

109
00:05:55,814 --> 00:05:56,731
我们来看一下
Let's have a look.

110
00:05:57,274 --> 00:06:00,777
首先和之前一样  创建一个 Button 可组合项
First, you have the button, the composable, just like it is before.

111
00:06:00,861 --> 00:06:03,947
然后声明了一堆参数  它们被称为 Modifier
Next you have a bunch of parameters. You’ve seen the modifier.

112
00:06:04,030 --> 00:06:08,034
Modifier 可以更改很多属性  比如这里的 onClick  same  enabled
That’s going to be on everything. You have onClick, same, enabled.

113
00:06:08,118 --> 00:06:09,828
在本例中  我设置成了 enabledState
In this case I have enabledState.

114
00:06:10,453 --> 00:06:13,081
假设您想添加应用图标
All right, let’s say you want to add an app icon.

115
00:06:13,164 --> 00:06:16,710
和此前在移动端一样
So this is just the same as it was before on mobile:

116
00:06:16,793 --> 00:06:19,170
需要 painter  contentDescription 和 modifier
a painter, contentDescription and a modifier.

117
00:06:19,254 --> 00:06:22,424
以便代码与移动端完全相同
So the code is exactly the same as you’d do on mobile.

118
00:06:22,507 --> 00:06:24,509
我们来看看代码所创建出来的效果如何
Let’s see what the results look like.

119
00:06:24,593 --> 00:06:27,012
您创建了一个精美小巧的按钮
All right, so here you have a nice little button.

120
00:06:27,095 --> 00:06:30,265
目前您使用的是同移动版相同的代码  但针对 Wear OS 进行了优化
And now, you use the same code but it’s optimized for Wear OS.

121
00:06:30,348 --> 00:06:32,350
此外  只需做出少量修改
And, with just a small amount of edits,

122
00:06:32,434 --> 00:06:35,186
您就可以极大地更改外观
you can really vastly change what it looks like as well.

123
00:06:35,270 --> 00:06:36,813
这里还有另外一些示例
Here are some other examples.

124
00:06:37,564 --> 00:06:39,524
我们来看看另一个
All right, let’s jump into another one.

125
00:06:40,191 --> 00:06:43,528
Card 可针对单一对象的内容和操作进行呈现
Cards take content and actions about a single subject

126
00:06:43,612 --> 00:06:46,740
较之您之前看过的示例提高了灵活性
and have a lot of flexibility, as you see from the examples.

127
00:06:46,823 --> 00:06:50,368
左侧是一个图标和一些文字  您也可以只保留文字
On the left we have an icon and some text. You can have just text.

128
00:06:50,452 --> 00:06:53,121
在右侧  我们使用一张图片作为背景
And, on the right, we have an image as the background.

129
00:06:53,204 --> 00:06:54,706
我们有两张主要卡片
We have two main cards.

130
00:06:54,789 --> 00:06:57,375
AppCard 和 TitleCard
We have the AppCard, and then we have the TitleCard,

131
00:06:57,459 --> 00:06:59,210
TitleCard 更侧重文字
which is more focused on text.

132
00:06:59,294 --> 00:07:01,630
但我们只着重介绍 AppCard
But we’re just going to focus on the AppCard.

133
00:07:02,213 --> 00:07:06,051
在本例中  我只设置一张图片并添加一些文字
In this case, I’m just setting an image, then I’m going to set some text.

134
00:07:06,134 --> 00:07:09,179
然后按顺序设置 Text 可组合项
I’m just setting a text composable on all these in order.

135
00:07:09,262 --> 00:07:10,972
我不会逐一介绍
I’m won’t go through all of them.

136
00:07:11,056 --> 00:07:14,309
但您能直观看到我有 onClick 属性
But you can see, pretty straightforward, I have an onClick.

137
00:07:14,392 --> 00:07:15,852
最后  我会设置 body
Finally, I’ll set the body.

138
00:07:15,936 --> 00:07:18,855
在本例中  我还使用 Text 设置了一个 Column
In this case, I’m setting a column in a text as well.

139
00:07:18,939 --> 00:07:22,692
我还能继续添加其他 Text  但这里我只想使用一个
I could add another text if I wanted to, but I’m just going to use one here.

140
00:07:22,776 --> 00:07:26,821
此代码十分相似  我们来看看实际呈现
So again, this code is pretty similar. Let’s have a look at what it looks like.

141
00:07:27,405 --> 00:07:29,991
这是一张针对 Wear OS 优化过的精美卡片
So there’s a nice card optimized for Wear OS.

142
00:07:30,075 --> 00:07:33,244
您也可以做一些轻微调整
And same thing here, you can make some slight modifications

143
00:07:33,328 --> 00:07:36,289
然后获得不同外观的精美卡片
and get different beautiful looking cards.

144
00:07:36,373 --> 00:07:38,375
接下来介绍 Chip
All right, chips.

145
00:07:39,167 --> 00:07:42,253
我们的 Material 指南中其实已经介绍了 Chip
Chips are actually specified in our Material guidelines,

146
00:07:42,337 --> 00:07:44,965
但不是移动 Material 库中的
but there isn’t one in the mobile Material library.

147
00:07:45,048 --> 00:07:49,135
Chip 旨在实现快捷的一键操作
They are meant for quick, one-tap actions, which makes especially good sense

148
00:07:49,219 --> 00:07:52,389
对屏幕空间有限的 Wear 设备尤其有用
for a Wear device and limited screen real estate.

149
00:07:52,472 --> 00:07:55,725
各种 Chip 变体可让您尽情挥洒创意
And chip variations to give you an idea of what can be created.

150
00:07:55,809 --> 00:07:57,560
我们来看一些代码
But let's look at some code.

151
00:07:57,644 --> 00:08:01,648
Chip 非常直观  很普通
So the chip, it’s pretty straightforward. Nothing out of the ordinary.

152
00:08:01,731 --> 00:08:04,109
参数也大致相似
The parameters, those are going to be similar.

153
00:08:04,192 --> 00:08:06,945
通常在其他可组合项上设置
Again, these are stuff you usually set on other things.

154
00:08:07,028 --> 00:08:08,613
我打算只设置 label
I'm going to just set a label.

155
00:08:08,697 --> 00:08:11,324
我们开发了 “一分钟瑜伽”  这很适合我
We have “1 minute Yoga,” which is about right for me.

156
00:08:11,408 --> 00:08:13,493
然后我们要设置图标
And then we’re going to set an icon.

157
00:08:13,576 --> 00:08:15,704
这些内容十分直观
So again, pretty straightforward stuff.

158
00:08:15,787 --> 00:08:17,580
它们的外观是这样的
And this is what it looks like.

159
00:08:17,664 --> 00:08:22,961
只要稍作修改您就能制作各种各样的 Chip
Again, with a little bit of variation, you can make all sorts of different chips.

160
00:08:23,044 --> 00:08:25,088
好  我们来看看其他 Chip
Okay, let’s have a look at another one.

161
00:08:25,714 --> 00:08:27,090
这是 ToggleChip
So this is toggle chips.

162
00:08:27,173 --> 00:08:29,384
和 Chip 很相似
This is similar to chips,

163
00:08:29,467 --> 00:08:32,929
但可让用户使用单选按钮  切换开关或复选框
but it allows the user to use a radio button, a toggle or a checkbox.

164
00:08:33,013 --> 00:08:35,598
比如左侧图片中展示的元素
The idea is, on the left, you can disable the sound

165
00:08:35,682 --> 00:08:37,684
只需点按一下即可开关声音
by just one tap and turn it back on.

166
00:08:37,767 --> 00:08:40,228
右侧的则对 ToggleChip 进行了拆分
On the right, we actually have split toggle chips,

167
00:08:40,311 --> 00:08:43,023
提供了两个不同的可点击区域
which offers two different tappable areas,

168
00:08:43,106 --> 00:08:44,566
可通过右侧将其关闭
on the right to turn it off,

169
00:08:44,649 --> 00:08:47,068
然后在左侧点击进入应用
and then maybe on the left it taps into the app.

170
00:08:47,152 --> 00:08:50,113
以便您在这里对闹钟进行编辑
So you can maybe you want to edit your alarm here,

171
00:08:50,196 --> 00:08:53,283
我们来看一些代码
but on the right you turn it off. So let’s look at some code.

172
00:08:53,366 --> 00:08:55,577
ToggleChip 十分直观
Again, ToggleChip, pretty straightforward.

173
00:08:55,660 --> 00:08:57,245
您设置一些参数
You set some parameters.

174
00:08:57,328 --> 00:08:59,414
与您用于我刚刚展示的
This’ll be similar to what you’re used to

175
00:08:59,497 --> 00:09:01,750
其他可组合项的参数类似
with the other composables I’ve just showed.

176
00:09:01,833 --> 00:09:04,335
我只打算设置声音 label
I’m just going to set a label for sound.

177
00:09:04,419 --> 00:09:06,463
此 label 能打开和关闭声音
This one will turn on and off sound.

178
00:09:06,546 --> 00:09:08,048
我们来看看它的外观
Let’s see how it looks.

179
00:09:08,131 --> 00:09:12,969
现在我们有了用于关闭声音的 ToggleChip
All right, so we have a nice sound toggle chip here to turn off the sound.

180
00:09:13,053 --> 00:09:17,140
再强调一次  只要稍作修改您就能尽情挥洒创意
And again, with a little bit of variation you can have all these options.

181
00:09:17,223 --> 00:09:19,684
您可能发现了一个规律
Okay, at this point you probably see a pattern.

182
00:09:19,768 --> 00:09:23,354
很多可组合项与您之前在移动端使用的一样
Many composables are the same as what you’ve already used on mobile.

183
00:09:23,438 --> 00:09:27,317
新的可组合项也几乎与之相同
And the new ones, well, they’re so familiar that they’re almost the same.

184
00:09:27,400 --> 00:09:30,570
换句话说  您之前学习 Compose 时掌握的知识
In other words, most of the work you've done to learn compose,

185
00:09:30,653 --> 00:09:32,280
可以直接用于 Wear OS 开发
now you have it on Wear OS.

186
00:09:32,363 --> 00:09:34,824
这非常棒  因为 Compose 很有意思
Which is great, because Compose is fun, right?

187
00:09:34,908 --> 00:09:37,160
接下来我们看看另一个我很喜欢的组件
Okay, let's look at another one I really like.

188
00:09:37,952 --> 00:09:41,873
CurvedText 针对圆形屏幕进行了优化
So CurvedText is optimized for the round screen,

189
00:09:41,956 --> 00:09:44,834
毫无疑问这对圆形设备十分重要
because, obviously, it’s important for a round device.

190
00:09:44,918 --> 00:09:50,256
TimeText 是基于 CurvedText 所创建的可组合项
TimeText is another option, which basically, under the hood, uses CurvedText,

191
00:09:50,340 --> 00:09:52,967
为您处理了时间方面的所有工作
but takes care of all the time for you.

192
00:09:53,051 --> 00:09:56,262
这样您就不会因与时间有关的类感到混乱了
So you do not have to mess with any time-related classes,

193
00:09:56,346 --> 00:09:58,306
这让我十分满意
which makes me super happy.

194
00:09:58,389 --> 00:10:03,394
实际上  我们的 Material 指南建议您在应用内或 Overlay 中
Actually, our Material guideline calls that you keep the time at the top of your screen

195
00:10:03,478 --> 00:10:05,814
将时间置于屏幕的顶部
within the app or overlay experience.

196
00:10:05,897 --> 00:10:08,983
此外  如果您使用的是 Wear 的 Scaffold
And, if you’re actually using the Wear’s Scaffold,

197
00:10:09,067 --> 00:10:10,819
这种做法能为您处理 Scaffold
then that takes care of it for you.

198
00:10:10,902 --> 00:10:13,071
稍后我会详细说一说
I’ll talk a little bit about that later.

199
00:10:13,154 --> 00:10:14,322
现在先看一下
But let’s have a look.

200
00:10:15,365 --> 00:10:19,869
首先  我创建一些在时间之前显示的前缀字符串
So, first, I’m going to actually create some text that I set before my time.

201
00:10:19,953 --> 00:10:22,122
我先这么做
So I do that first.

202
00:10:22,205 --> 00:10:25,250
接下来创建一个 TimeText 可组合项
Next, I create the TimeText composable.

203
00:10:25,333 --> 00:10:28,711
我想指定 leadingCurvedContent
I want to specify the leadingCurvedContent.

204
00:10:28,795 --> 00:10:33,800
这是在时间之前显示的文字
And what that means is this is the text that will show before the time, right?

205
00:10:33,883 --> 00:10:37,846
因为这是曲线的  只能在曲面设备或圆形设备上展示
And because it’s curved, this will only show for curved or round devices.

206
00:10:37,929 --> 00:10:41,474
在本例中  我使用了 CurvedText 进行实现
In this case, I’m actually using, under the hood, a basic CurvedText.

207
00:10:41,558 --> 00:10:43,059
我设置了时间
I set the time.

208
00:10:43,143 --> 00:10:45,562
接下来  我设置了 LinearContent
Next, I do a LinearContent.

209
00:10:45,645 --> 00:10:47,689
这适用于非曲面设备
This’ll be for a non-curved device.

210
00:10:47,772 --> 00:10:49,816
我只想使用常规文字
I just want to use a regular text there.

211
00:10:49,899 --> 00:10:53,027
但我仍想让文字在前还有其他选择
But I still want that to be in front. There’s other options.

212
00:10:53,111 --> 00:10:57,073
您可以将文字放在后面还可以根据需要添加分隔符
You could put the text behind, you can add a separator if you want.

213
00:10:57,157 --> 00:10:59,492
我打算采用简单方法将文字放在前面
I’m just keeping it simple and doing the front.

214
00:11:00,326 --> 00:11:01,744
这是最终呈现的结果
And this is what you get.

215
00:11:01,828 --> 00:11:05,623
可以看到  显示文本前的文字 ETA 和时间
You can see I have ETA, that’s the text I created, and then the time.

216
00:11:05,707 --> 00:11:06,833
最好的一点是
And the best part?

217
00:11:06,916 --> 00:11:10,712
我无需费力梳理时间类  如果在方形设备上
I didn’t have to mess with any time classes. If this was on a square device,

218
00:11:10,795 --> 00:11:13,256
也能呈现良好的效果
then it’d show up nice on a square device as well.

219
00:11:14,257 --> 00:11:17,010
接下来  我们来讨论一下 List
All right, let’s talk about lists.

220
00:11:17,886 --> 00:11:18,720
这是 List 的样式
So lists.

221
00:11:18,803 --> 00:11:22,265
List 纵向展示了连续的界面元素
Lists contain a continuous vertical set of elements, blah, blah, blah.

222
00:11:22,348 --> 00:11:24,517
如您所知  每个人都会使用列表
You know this. Everyone uses lists.

223
00:11:24,601 --> 00:11:26,394
在 Wear OS 上却稍有不同
It’s a bit different on Wear OS.

224
00:11:26,477 --> 00:11:29,939
因为在屏幕顶部和底部空间非常小
So on the top and the bottom of the screen there's less space, right?

225
00:11:30,023 --> 00:11:34,068
因此 Material Design 引入了新的 ScalingLazyColumn
So Material Design introduced scaling and transparency

226
00:11:34,152 --> 00:11:36,863
进行缩放和透明度的展示
with the new ScalingLazyColumn.

227
00:11:36,946 --> 00:11:41,075
这有助于您在较小的空间内查看列表
So this helps you view lists in a small space.

228
00:11:41,159 --> 00:11:42,619
我们来看一下
So let's have a look at that.

229
00:11:42,702 --> 00:11:45,997
这个示例完全展示了我所讲的内容
So this is an example to show exactly what I’m talking about.

230
00:11:46,080 --> 00:11:48,376
您能看到随着列表内元素的滑入
So you can see the element as it comes up,

231
00:11:48,580 --> 00:11:50,376
当列表的某一行靠近中心位置会放大到完整尺寸
it gets bigger and becomes more opaque.

232
00:11:50,460 --> 00:11:55,089
然后随着该元素的滑出  会变得越来越小并更加透明直至完全消失
And then, as it goes away, it gets smaller and it kind of disappears a little bit.

233
00:11:55,173 --> 00:11:57,717
这就是通过 ScalingLazyColumn 实现的
And that’s what ScalingLazyColumn does for you.

234
00:11:59,636 --> 00:12:02,347
这是实际应用的现实  您可以通过它看到实际运作过程
Here’s an actual app where you can actually see it.

235
00:12:02,430 --> 00:12:05,850
同样一点点放大然后渐渐消失
Same thing. Kind of scales up and disappears.

236
00:12:05,934 --> 00:12:08,269
然后缩小并消失
And then it scales down and disappears as well,

237
00:12:08,353 --> 00:12:10,730
这十分有助于阅读
which is really nice and helps with readability.

238
00:12:12,941 --> 00:12:15,985
这就是 ScalingLazyColumn
All right, so ScalingLazyColumn.

239
00:12:16,069 --> 00:12:20,448
这应该是 Wear OS 应用的默认组件
It should be your default for any app on Wear OS.

240
00:12:21,324 --> 00:12:25,495
不仅能让您实现我刚才所讲的缩放和透明度效果
It obviously gives you the scaling and transparency effects I just talked about,

241
00:12:25,578 --> 00:12:27,497
还能处理大量内容
but also it handles lots of items.

242
00:12:27,580 --> 00:12:30,833
ScalingLazyColumn 顾名思义  您大概猜出来了
So you’re probably guessing by the name, ScalingLazyColumn,

243
00:12:30,917 --> 00:12:33,127
它是由 LazyColumn 打造
it was built with LazyColumn. You’d be right.

244
00:12:33,211 --> 00:12:35,338
当您拥有较长列表时
You get all the advantages of LazyColumn,

245
00:12:35,421 --> 00:12:37,048
您能充分利用 LazyColumn
which when you have a long list,

246
00:12:37,131 --> 00:12:41,261
如同我们此时在屏幕上看到的  您只能查看一小部分
like what we see on the screen there, you only can view a small portion of it.

247
00:12:41,344 --> 00:12:44,055
LazyColumn 将进行优化
So LazyColumn’s going to do all those optimizations

248
00:12:44,138 --> 00:12:46,474
仅会对要在屏幕上呈现的内容进行处理
and only compose what’s on the screen.

249
00:12:46,557 --> 00:12:51,104
您可以获得所有精美的免费缩放和透明度功能
So you get all that for free and the nice scaling and transparency features.

250
00:12:51,896 --> 00:12:53,648
我们来看一些代码
All right, let’s look at some code.

251
00:12:53,731 --> 00:12:58,903
您熟悉为 LazyColumn 设置状态
So you’re used to setting state anyway for your LazyColumns.

252
00:12:58,987 --> 00:13:01,406
这里除了名字不同  其他都一样
Same thing here, except it uses a different name.

253
00:13:01,489 --> 00:13:04,033
rememberscalingLazyListState
Remember scalingLazyListState.

254
00:13:04,117 --> 00:13:07,996
这个词有点拗口  但充分体现了它的功能
That’s kind of a mouthful, but it explains exactly what it is pretty well.

255
00:13:08,079 --> 00:13:11,624
接下来  您创建了 ScalingLazyColumn
Next, you create a ScalingLazyColumn, just like you would a LazyColumn,

256
00:13:11,708 --> 00:13:13,376
就像创建 LazyColumn 一样  然后您设置了参数
and you set your parameters.

257
00:13:13,459 --> 00:13:17,880
这些都是一样的  modifierverticalarrangement  然后设置状态
These are all the same, modifiers, vertical arrangement, and then you set the state.

258
00:13:17,964 --> 00:13:21,259
接下来设置内容代码完全相同
After that, you set the content. And this is exactly the same.

259
00:13:21,342 --> 00:13:24,804
item 为内容提供支持  以及这里您想实现的操作
Items are supported in item. So whatever you want to do here.

260
00:13:25,888 --> 00:13:30,852
这里就是最终实现效果  无需额外的工作
And that’ll give you something like this, with no extra work, which is great.

261
00:13:30,935 --> 00:13:35,064
接下来我们讨论一下其他组件您可能十分熟悉  Box
Okay, now we want to talk to something else you’re probably familiar with: box.

262
00:13:35,148 --> 00:13:40,320
请注意 Box 就是屏幕中的一个容器
So as a reminder, a box is basically a container for your screen.

263
00:13:40,403 --> 00:13:43,323
您可在移动端使用  但这里我们有专属版本
You can use it on mobile, but we have our own.

264
00:13:43,406 --> 00:13:47,660
即 SwipeToDismissBox  可用于您的布局
And it’s called SwipeToDismissBox, and this is going to be for your layout.

265
00:13:47,744 --> 00:13:53,249
顾名思义 SwipeToDismiss 的功能是滑动以关闭
So you’re probably guessing from the name, SwipeToDismiss, this means swipe to dismiss.

266
00:13:53,333 --> 00:13:54,584
十分直观
Pretty straightforward.

267
00:13:54,667 --> 00:13:59,714
在 Wear 上  主要的手势就是滑动
On Wear, actually, one of the gestures, the main gestures is swiping,

268
00:13:59,797 --> 00:14:03,134
向右侧滑动相当于 “返回” 按钮
and that will go back, as if it’s the Back button.

269
00:14:03,217 --> 00:14:06,846
在本例中  我们使用 Box 支持这项功能
So, in this case, this is supported for you out of the box.

270
00:14:06,929 --> 00:14:08,348
我们来看一些代码
Let’s look at some code.

271
00:14:08,431 --> 00:14:10,933
与移动端不同  您必须设置 state
What’s different on mobile is you must have state.

272
00:14:11,017 --> 00:14:13,686
以便使用 rememberSwipeToDismissBoxState
So you’ll use a rememberSwipeToDismissBoxState.

273
00:14:14,437 --> 00:14:17,482
您使用 SwipeToDismissBox 创建组合项
You create the composable with SwipeToDismissBox.

274
00:14:17,565 --> 00:14:19,359
在本例中  您传递 state 参数
In this case you pass in the state.

275
00:14:19,442 --> 00:14:22,236
获得返回的布尔值  即 isBackground
You'll get a Boolean back, which is isBackground.

276
00:14:22,320 --> 00:14:26,115
这表示此过程是否是滑动返回
And what that means is it’s in the process of swiping away,

277
00:14:26,199 --> 00:14:29,410
您可以据此呈现不同内容
so you can actually render different things based on that.

278
00:14:29,494 --> 00:14:32,580
在本例中  我们呈现了不同的颜色如您所见
In our case, we’ll render a different color so you can see it.

279
00:14:32,663 --> 00:14:34,457
如果您使用了导航组件
If you’re using any navigation,

280
00:14:34,540 --> 00:14:37,460
您可能希望在用户从当前屏幕滑动返回之前
you probably wanna show the screen before the current one

281
00:14:37,543 --> 00:14:39,087
显示该屏幕
they’re swiping back from.

282
00:14:39,170 --> 00:14:41,881
在本例中  我仅设置了一个包含一些文字的 Column
In this case, I’m just setting a Column with some text.

283
00:14:41,964 --> 00:14:44,217
我能添加更多但我不想搞得太复杂了
I could add more, but we’ll keep it simple.

284
00:14:44,300 --> 00:14:45,802
这是呈现情况
So this is what it looks like.

285
00:14:46,719 --> 00:14:50,848
此外  您还有很多其他选择  我们还提供了已发布效果的组件
Also, there’s other options you can do. We have stuff with launched effect.

286
00:14:50,932 --> 00:14:55,603
如果您想实现自定义效果  可以将其与导航组件结合使用
You’ll want to use that with navigation if you’re doing your own under the hood.

287
00:14:55,686 --> 00:14:56,562
试试看吧
Check it out.

288
00:14:56,646 --> 00:14:59,482
不过我没有时间介绍了  您可以阅读相关文档了解更多
I don’t have time for that, but it’s covered in the docs.

289
00:14:59,565 --> 00:15:00,817
还有两个主题
We have two things left.

290
00:15:00,900 --> 00:15:03,486
我们要讲讲 Scaffold 和 Navigation
We’re going to talk about Scaffold and Navigation.

291
00:15:03,569 --> 00:15:04,987
先从 Scaffold 开始
Let’s start with Scaffold.

292
00:15:05,947 --> 00:15:08,616
Scaffold 可轻松确保您的组件位于适当的位置
So Scaffold, it’s easy to make sure your components

293
00:15:08,699 --> 00:15:11,452
并可正确地协同工作
are properly positioned and work together correctly

294
00:15:11,536 --> 00:15:15,415
同时遵循基本的 Material Design 布局结构
while following the basic Material Design layout structure.

295
00:15:15,498 --> 00:15:17,667
比如移动版本的 Scaffold
For instance, with mobile it provides slots

296
00:15:17,750 --> 00:15:20,420
可以为最常见的顶层 Material 组件提供槽位
for the most common top-level Material components,

297
00:15:20,503 --> 00:15:25,967
如 topBar  bottomBar  floatingActionButton 等
so like topBar, bottomBar, floatingActionButton, all that stuff.

298
00:15:26,050 --> 00:15:28,719
本例中的这个移动应用
In this case, if we look at this mobile app,

299
00:15:28,803 --> 00:15:31,472
就使用了 bottomBar
you can see it has a bottomBar.

300
00:15:31,556 --> 00:15:32,643
如果您已有抽屉式导航栏
If you had a drawer, 

301
00:15:32,856 --> 00:15:35,643
您可根据需要向左滑动以获取抽屉式导航栏菜单
you can swipe left for a drawer menu if you want to.

302
00:15:35,726 --> 00:15:39,021
Scaffold 可处理信息提示控件大大简化您的工作
The Scaffold handle snackbars. It makes it a lot easier for you.

303
00:15:39,105 --> 00:15:41,274
显然  此处是 Scaffold content
Obviously, you’d have your content in there.

304
00:15:41,357 --> 00:15:46,779
其中部分 content 位于屏幕上方
And the idea is that some of that stuff is kind of above your screen.

305
00:15:46,863 --> 00:15:49,574
无论您如何更改这些内容几乎没有变化
As you change those out, stuff stays more of the same.

306
00:15:49,657 --> 00:15:53,453
当然  您可以稍微进行自定义设置  但这些内容基本上保持不变
Obviously, you can customize it a bit, but mostly it’s staying the same.

307
00:15:53,536 --> 00:15:55,204
我们对 Wear 有同样的想法
We have the same idea with Wear,

308
00:15:55,288 --> 00:15:58,124
但仅在 content 以外提供了三个主要组件
but we only have three main ones outside of the content.

309
00:15:58,875 --> 00:16:01,752
有 timeText  非常直观
We have timeText, which is pretty straightforward.

310
00:16:01,836 --> 00:16:03,546
您此前已了解的 timeText
You've already seen timeText.

311
00:16:03,629 --> 00:16:06,007
可让您将时间置于屏幕顶部
That’ll give you time at the top of the screen.

312
00:16:06,090 --> 00:16:08,342
该组件能为您放置时间  这点非常棒
It’s going to place it for you, which is nice.

313
00:16:09,469 --> 00:16:10,720
接下来我们了解 Vignette
Next, we have vignette,

314
00:16:10,803 --> 00:16:13,514
该组件可在屏幕周围为您提供漂亮的晕影效果
which is gives you a nice vignette around the screen.

315
00:16:13,598 --> 00:16:17,185
这里虽然有点难以分辨  但您可想象在屏幕周边会看到
It’s kind of hard to see here, but you can imagine a nice vignette

316
00:16:17,268 --> 00:16:18,644
漂亮晕影的效果
you get around the screen.

317
00:16:18,728 --> 00:16:21,439
最后  我们来了解 positionIndicator
And then, finally, we have positionIndicator.

318
00:16:21,522 --> 00:16:24,150
也叫滚动指示器
This is also known as the scrolling indicator,

319
00:16:24,233 --> 00:16:27,445
可让您了解在当前可组合项中的滚动位置
which lets you know where you are in the composable below.

320
00:16:27,528 --> 00:16:29,947
您可能会问  为什么要将它放在 Scaffold 中
You’ll ask, why do we put this in the Scaffold?

321
00:16:30,031 --> 00:16:31,866
因为屏幕的曲度
Due to the curvature of the screen,

322
00:16:31,949 --> 00:16:34,702
positionIndicator 需要位于手表屏幕的中间
the positionIndicator needs to be centered on the watch,

323
00:16:34,785 --> 00:16:38,873
不只是视口中心  否则可能会被截断
not just centered on the viewport, because otherwise it could be cut off.

324
00:16:38,956 --> 00:16:41,876
如本例所示  这是一个播放列表
Like for example here, you can see this is a playlist,

325
00:16:41,959 --> 00:16:43,586
这部分不会移动
that part does not move.

326
00:16:43,669 --> 00:16:46,130
但以下可滚动部分可以移动
But the scrollable portion below it does.

327
00:16:46,214 --> 00:16:48,925
如果我们将其设置到视口中
So, if we set that to the viewport,

328
00:16:49,008 --> 00:16:51,469
大部分滚动指示器都会被截断
most of the scrolling indicator would be cut off.

329
00:16:51,552 --> 00:16:54,305
因此我们将其向上移动到 Scaffold 一级
So that’s why we’ve moved that up to the Scaffold level.

330
00:16:55,223 --> 00:16:57,099
最后我们已经介绍了 content
And then, finally, we have content.

331
00:16:59,310 --> 00:17:01,521
在继续后面的内容之前我想先讨论一下
Before we move forward I’d like to just talk

332
00:17:01,604 --> 00:17:04,857
Scaffold 设计  这点很重要
about the Scaffold design first because that’s important.

333
00:17:04,941 --> 00:17:07,568
我花了一点时间梳理了我要讲的内容
It took me a while to get my head wrapped around it,

334
00:17:07,652 --> 00:17:12,031
我希望讲完之后确保每个人都能记住我讲的内容
but, once I did, then I always wanna make sure I ingrain this in people’s head.

335
00:17:12,114 --> 00:17:15,493
您需要做的第一件事是对 App 进行设置
So the first thing you want to do is you set your app.

336
00:17:15,576 --> 00:17:18,788
您要设置 MaterialTheme 像之前设置 App 类似
You do your Material Theme like you’re used to doing

337
00:17:18,871 --> 00:17:20,623
设置一些外观和风格
for the look and feel of your app.

338
00:17:20,706 --> 00:17:23,709
然后放置您的 Scaffold  之后再是 Content
Then you put your Scaffold. After that, you put your content.

339
00:17:23,793 --> 00:17:26,879
与在移动端操作相同
So, if you’re doing this in mobile, it’s the same thing.

340
00:17:26,963 --> 00:17:28,464
建议也一样
It’s the same recommendation.

341
00:17:28,548 --> 00:17:31,217
在 Theme 之下 Content 之上
It’s just below the Theme, above the content.

342
00:17:31,300 --> 00:17:32,635
我们来看一些代码
Let’s look at some code.

343
00:17:33,719 --> 00:17:36,722
在本示例中  我们的 Content 会在 Scaffold 中配置
So in our example, our content inside the Scaffold

344
00:17:36,806 --> 00:17:38,307
即 scalingLazyColumn
is a scalingLazyColumn.

345
00:17:38,391 --> 00:17:42,520
以便我们提升状态为 positionIndicator 提供支持
So we hoist its state up here to support the positionIndicator.

346
00:17:42,603 --> 00:17:44,689
我们来稍微深入一些
Let’s look at that a little bit deeper.

347
00:17:46,941 --> 00:17:50,444
我刚刚讲过  因为 positionIndicator
So, because the position, as I’ve talked about a little bit earlier,

348
00:17:50,528 --> 00:17:52,280
在 Content 之外
lives outside the content

349
00:17:52,363 --> 00:17:55,283
因此要将 state 提升到 Scaffold 之上的级别
means you have to hoist the state above the Scaffold.

350
00:17:55,366 --> 00:17:59,245
因为我们不想它在其他屏幕上被截断
Again, this is because we just don’t want it cut off on all the other screens,

351
00:17:59,328 --> 00:18:03,082
尤其是不在两侧时  该组件还有其他优势
especially if they don’t take up the sides. There’s other benefits as well.

352
00:18:03,165 --> 00:18:06,669
您可以查看滚动状态  此时想通过滚动为屏幕留出足够空间时
You can check the scrolling state, so maybe you make the time disappear

353
00:18:06,752 --> 00:18:08,963
可让时间显示消失
when scrolling to give screen real estate.

354
00:18:09,046 --> 00:18:12,883
或者根据滚动状态关闭和打开 vignette
Or you can even turn the vignette off and on based on that scrolling state.

355
00:18:12,967 --> 00:18:17,263
顺便说一下  如果您想详细了解 state
By the way, if you want to learn more about state,

356
00:18:17,346 --> 00:18:20,516
请观看 Manuel 的讲座 “需要注意的 Compose State”
check out Manuel’s talk, “A Compose State of Mind.”

357
00:18:20,600 --> 00:18:23,352
这个视频非常棒  他讲解了关于 state 方面的一系列内容
It’s great, and he explains a bunch of stuff about state

358
00:18:23,436 --> 00:18:27,356
和工作原理  还提到了 Scaffold 的一些知识
and how it all works together, and he’ll touch upon the Scaffold stuff.

359
00:18:27,440 --> 00:18:32,570
我们已针对 positionIndicator 提升了状态
Okay, so we’ve hoisted the state up for the positionIndicator.

360
00:18:32,653 --> 00:18:37,283
positionIndicator 支持很多不同的滚动选项
By the way, the positionIndicator supports many different options for scrolling.

361
00:18:37,366 --> 00:18:43,706
在本例中  我们使用了scalingLazyListState
So, in our case, we’re using a ScalingLazyListState,

362
00:18:43,789 --> 00:18:46,959
但您也可以使用 scrollingLazyListState
but you could use a scrollingState, a LazyListState.

363
00:18:47,043 --> 00:18:51,088
我们还提供了其他酷炫组件支持旋转侧边按钮和旋转边框
We have some other cool stuff with rotating side buttons and rotating bezels.

364
00:18:51,172 --> 00:18:54,050
选项众多  请查看相关文档
There’s basically lots of options. So check out the docs.

365
00:18:54,133 --> 00:18:56,385
好了  就讲这么多  我们继续
Okay, enough of that. Let’s get on.

366
00:18:56,469 --> 00:18:58,304
接下来  您设置 MaterialTheme
Next, you do your MaterialTheme,

367
00:18:58,387 --> 00:19:01,682
并将 Scaffold 和 content 放置其中
and you put your Scaffold, and your content would go inside.

368
00:19:01,766 --> 00:19:06,354
我没有全部写出来但您可根据屏幕随意放置内容
I won’t spell that all out, but again, whatever you want to put as your screen.

369
00:19:06,437 --> 00:19:07,938
我们来看看参数
Let's look at the parameters.

370
00:19:08,564 --> 00:19:10,691
modifier 是相同的
So you have your modifier, that’s the same.

371
00:19:11,400 --> 00:19:12,985
接下来  我们来看看 timeText
Next, we have timeText.

372
00:19:13,069 --> 00:19:17,531
您对我之前展示的 TimeText 非常熟悉
So you’re used to the TimeText that I showed earlier.

373
00:19:17,615 --> 00:19:20,826
这二者相同  您只需拖入即可我们不再介绍了
It’s the same thing, you just drop it in, so we won’t cover that.

374
00:19:20,910 --> 00:19:23,079
接下来是 vignette
Vignette. This one, let's break it out.

375
00:19:23,162 --> 00:19:25,831
非常简单您设置 vignette 位置
It’s pretty easy. You set the vignette position.

376
00:19:25,915 --> 00:19:28,167
在本例中  我们放到顶部和底部
In this case, we’ll do top and bottom,

377
00:19:28,250 --> 00:19:31,545
最后我们设置 positionIndicator
and then, finally, we’ll set the positionIndicator.

378
00:19:31,629 --> 00:19:33,714
我们把它单独拿出来  看看效果
Let’s pull that out and see how it looks.

379
00:19:34,548 --> 00:19:37,760
在本例中  我要查看 state 以了解是否在滚动
In this case, I’m looking at the state to see if it’s scrolling.

380
00:19:37,843 --> 00:19:41,305
如果没有滚动的话  我不会展示它  下面是最重要部分
I don’t show it unless it’s scrolling. Here’s the most important part.

381
00:19:41,389 --> 00:19:43,557
PositionIndicator 需要用到 state
The positionIndicator requires the state,

382
00:19:43,641 --> 00:19:46,519
这是我们从 LazyColumn 提升状态的主要原因
and it’s the main reason we hoisted it up from LazyColumn.

383
00:19:46,602 --> 00:19:47,895
我们将其传递进来
So we pass that in.

384
00:19:47,978 --> 00:19:49,355
可以了
So there you go.

385
00:19:49,438 --> 00:19:52,817
当您滚动内容时您会看到美观的滚动条
When you’re scrolling the content, you’ll get a nice scrolling bar,

386
00:19:52,900 --> 00:19:54,610
并在顶部看到时间
and you got the time on the top.

387
00:19:54,694 --> 00:19:59,198
当您在屏幕之间移动时  这些一直可见
And these will all stay visible when you’re moving between your screens.

388
00:19:59,281 --> 00:20:03,953
滚动不可见但时间可见  如果您有 vignette  也能看到
Well, the scroll won’t but the time will, and if you have a vignette, that can as well.

389
00:20:04,036 --> 00:20:07,873
最后我们来介绍 Navigation
All right, so next and last we’ll get to Navigation.

390
00:20:09,583 --> 00:20:13,713
如果您还记得之前的幻灯片您会记得我提到过
All right, if you remember the earlier slide, you remember that I mentioned

391
00:20:13,796 --> 00:20:17,466
您必须使用 Wear Navigation 依赖项来替换 Navigation
you must replace the Navigation with the Wear Navigation dependency.

392
00:20:17,550 --> 00:20:19,009
再次强调一下这一点
I just wanna call that again.

393
00:20:19,093 --> 00:20:22,096
从技术层面来讲  您仍可使用移动版
Technically you could still use the mobile one,

394
00:20:22,179 --> 00:20:24,515
但您可能会遇到各种问题
but you’re going to have a bad time, right?

395
00:20:24,598 --> 00:20:28,519
并且 Wear Navigation 已针对 Wear 进行了优化
And the Wear Navigation one is optimized, well, obviously, for Wear.

396
00:20:29,812 --> 00:20:34,191
和我之前所讲的 Scaffold 设计相同
All right, so it’s the same design as I talked about earlier with the Scaffold.

397
00:20:34,275 --> 00:20:35,860
该组件也和移动版采用相同设计
It’s the same design as mobile.

398
00:20:35,943 --> 00:20:39,488
App  Material Theme 以及 Scaffold 都一样
You have your app and your Material Theme, then your Scaffold.

399
00:20:39,572 --> 00:20:42,992
在移动端  您可在此处放置 NavHost  但在本例中
And then, on mobile, you put your NavHost there, but in our case,

400
00:20:43,075 --> 00:20:46,996
我们使用了 Wear 等同项  即 SwipeDismissableNavHost
because we’re using the Wear equivalent, we use SwipeDismissableNavHost.

401
00:20:47,496 --> 00:20:51,792
顾名思义  您可能猜出了该组件支持滑出操作
And you could probably guess from the name that that means it supports swipe away,

402
00:20:51,876 --> 00:20:53,461
就如同 Box 一样
which is just like the box.

403
00:20:53,544 --> 00:20:55,337
然后是您的 content
And then you have your content.

404
00:20:55,421 --> 00:20:57,673
就像我刚才所讲的它可以处理滑动
So it handles swiping, I just said that.

405
00:20:58,215 --> 00:21:01,802
好消息是  您可以重新运用开发移动应用所需的知识
The nice thing is, you’ll see, you can reuse your knowledge from mobile.

406
00:21:02,762 --> 00:21:04,430
我们看一些代码
Let’s look at some code.

407
00:21:04,513 --> 00:21:08,601
MaterialTheme 和 Scaffold 与之前的设置一样
So the MaterialTheme and the Scaffold, you set those just as you did before.

408
00:21:09,268 --> 00:21:11,395
这是您的 Navigation 代码
Your Navigation code will go here.

409
00:21:12,146 --> 00:21:14,064
在本例中  我们创建了控制器
In this case, we create a controller.

410
00:21:14,148 --> 00:21:16,942
我们专门使用了适用于 SwipeDismissable 版本的
We use a specific one for the SwipeDismissable version,

411
00:21:17,026 --> 00:21:20,946
rememberSwipeDismissableNavController 非常拗口
so rememberSwipeDismissableNavController, which is quite a mouthful.

412
00:21:21,030 --> 00:21:23,991
但充分体现了它的功能
But it explains what it is pretty well.

413
00:21:24,700 --> 00:21:27,203
然后您使用 SwipeDismissableNavHost
Then you use your SwipeDismissableNavHost,

414
00:21:27,286 --> 00:21:30,706
将 startDestination 及路径传递到控制器中
you pass in the controller, the startDestination with a route,

415
00:21:30,790 --> 00:21:34,460
然后将主屏幕内容放在这里
and then you put your main screen content right here.

416
00:21:34,543 --> 00:21:38,047
在本例中  您使用的代码与移动端相同
And, in this case, it’s the same code that you’d use on mobile.

417
00:21:38,130 --> 00:21:42,092
使用可组合项  然后以同样的方式使用它来设置您的界面
Use composable, and then you use it the same way to set your screens.

418
00:21:43,093 --> 00:21:45,429
然后就可呈现这样的效果  真神奇
And magic, you’ll have something like this,

419
00:21:45,513 --> 00:21:48,224
滑出去并进入之前的屏幕
where you swipe away and it goes to the screen before.

420
00:21:48,307 --> 00:21:49,975
您可设置所有内容
So you can set all this stuff up.

421
00:21:50,059 --> 00:21:51,519
好了  我们来回顾一下
All right, let's recap.

422
00:21:52,269 --> 00:21:55,689
首先我们即将推出开发者预览版
So, first, we’re in Developer Preview now.

423
00:21:55,773 --> 00:22:00,820
已经发布了大量 Alpha 版本并准备好聆听您的反馈
We’ve had a lot of Alpha releases, and we’re ready for your feedback.

424
00:22:01,946 --> 00:22:04,907
Compose 确保您设置了合适的依赖项
Compose, make sure you set the right dependencies.

425
00:22:04,990 --> 00:22:08,327
您要替换 Material 并添加 Foundation
You want to replace Material, and you want to add Foundation.

426
00:22:08,410 --> 00:22:11,580
如果您使用的是 Navigation 也同样要替换
And, if you are using Navigation, replace that as well.

427
00:22:11,664 --> 00:22:15,251
Compose 构建方面的所有知识都可直接用于 Wear Compose
All knowledge built up on Compose translates directly to Wear Compose

428
00:22:15,334 --> 00:22:17,670
让您快速打造精美界面
so you can build beautiful UIs fast.

429
00:22:18,712 --> 00:22:21,632
就像移动端 Alpha 版和开发者预览版一样
Just like the mobile Alphas and the Developer Previews,

430
00:22:21,715 --> 00:22:25,678
我们希望聆听您的反馈  请不吝提供反馈
we want to include your feedback, so make sure you give it to us.

431
00:22:25,761 --> 00:22:27,471
我们来看最后一张幻灯片
Which leads us to the last slide.

432
00:22:27,555 --> 00:22:32,017
请访问 d.android.com/wear/compose
d.android.com/wear/compose,

433
00:22:32,101 --> 00:22:36,105
查找示例  Codelab  指南
that’s where you’ll find samples, codelabs, guides, and most importantly,

434
00:22:36,188 --> 00:22:38,691
最重要的是向我们发送反馈以便我们及时采纳
where to send us feedback so we can incorporate it.

435
00:22:38,774 --> 00:22:40,192
我知道您的时间十分宝贵
I know your time’s valuable,

436
00:22:40,276 --> 00:22:43,153
非常感谢您从百忙之中抽出时间参加会议
so thank you so much for spending some of it with us.

437
00:22:43,237 --> 00:22:44,154
祝您编码愉快
Happy coding.

438
00:22:44,822 --> 00:22:45,656
谢谢
Thank you.