1# 案例应用 2 3 4本章从OpenHarmony预置的系统应用中，选择短信应用作为典型的案例，从页面开发和工程结构的角度，介绍"一多"的具体实践。OpenHarmony的产品形态在不断丰富中，当前主要有默认设备和平板两种产品形态，本章的具体实践也将围绕这两种产品形态展开。 5 6 7## 概览 8 9[短信](https://gitee.com/openharmony/applications_mms/tree/master)是OpenHarmony中预置的系统应用，主要包含信息查看、发送短信、接收短信、短信送达报告、删除短信等功能。在不同类型设备上，短信应用的功能完全相同，故短信应用适合使用[部署模型A](introduction.md#部署模型)（即：不同类型的设备上安装运行相同的HAP包或HAP包组合）。 10 11本案例中，在会话详情页面利用[方舟开发框架](introduction.md#方舟开发框架)提供的“一多”能力，用一套代码同时适配默认设备和平板。 12 13 14### 工程结构 15 16短信应用的工程结构如下图所示，当前该应用的功能较少，所以直接使用了DevEco Studio创建出的默认工程结构。具体采用何种形式的工程结构，并不影响应用的开发。但是使用推荐的工程结构，目录结构更清晰，拓展性也更好。 17 18短信应用UI相关的逻辑集中在views和pages两个目录，分别存放公共组件及页面。当前短信应用主要包含如下页面： 19 20- 信息列表页面：首页，展示信息列表。 21 22- 通知信息列表页面：将通知类信息集中在一起展示，与信息列表页面类似。 23 24- 会话详情页面：展示与某联系人的所有信息往来。 25 26- 报告详情页面：信息发送报告的详情页面。 27 28- 设置页面：消息设置页面，如是否展示送达报告等。 29 30 31``` 32/Mms/ 33 ├── doc # 资料 34 ├── entry 35 │ └── src 36 │ └── main 37 │ ├── resources # 资源配置文件存放目录 38 │ ├── config.json # 全局配置文件 39 │ └── ets # ets代码目录 40 │ ├── ServiceAbility # 后台常驻服务 41 │ └── default # 业务代码目录 42 │ ├── data # 自定义数据类型 43 │ ├── model # 对接数据库 44 │ ├── pages # 所有页面 45 │ │ ├── conversation # 会话详情页面 46 │ │ ├── conversationlist # 信息列表页面 47 │ │ ├── index # 初始页面 48 │ │ ├── info_msg # 通知信息列表页面 49 │ │ ├── query_report # 报告详情页面 50 │ │ └── settings # 设置页面 51 │ ├── service # 业务逻辑 52 │ ├── utils # 工具类 53 │ ├── views # 自定义组件 54 │ └── app.ets # 应用生命周期 55 ├── signs # 签名 56 └── LICENSE 57``` 58 59短信应用在开发阶段，采用了一层工程结构。由于功能较为简单，所以并没有规划共用的feature和common目录，仅采用了一层product目录。 60 61- 业务形态层（product） 62 该目录采用IDE工程默认创建的entry目录，开发者可根据需要在创建Module时自行更改该目录名。不同产品形态，编译出相同的短信HAP包。 63 64 65 66## 会话详情页面 67 68 69### 页面结构 70 71 | 默认设备 | 平板 | 72| -------- | -------- | 73|  |  | 74 75会话详情页面在默认设备和平板上的样式如上图所示，会话详情页面可以划分为三个部分： 76 77 | 页面组成 | 介绍 | 78| -------- | -------- | 79| 顶部标题栏 |  | 80| 信息列表 |  | 81| 底部输入栏 |  | 82 83接下来我们详细介绍各部分的实现。 84 85>  **说明：** 86> 为了方便理解，我们对会话详情页面做了一定的精简，本小节仅介绍会话详情页面最基础的实现。 87 88 89### 顶部标题栏 90 91 | 默认设备 | 平板 | 92| -------- | -------- | 93|  |  | 94 95顶部标题栏是一个简单的行布局，包含返回图标、联系人头像、联系人姓名和号码、拨号图标、设置图标共5个元素。其中，联系人姓名和号码以列布局的形式放在一起。 96 97在默认设备和平板上，顶部标题栏的组件结构是相同的，仅联系人姓名和号码与拨号图标的间距不同。回顾方舟开发框架一多能力介绍，这个场景可以借助Blank组件使用拉伸能力。 98 99 我们先实现联系人姓名和号码，用Flex组件作为父容器，其包含两个Text子组件，分别用于存放联系人姓名和号码。Flex组件的属性设置如下： 100- direction: FlexDirection.Column：子组件在Flex容器上以列的方式排布，即主轴是垂直方向。 101 102- justifyContent: FlexAlign.Center：子组件在Flex容器主轴（垂直方向）上居中对齐。 103 104- alignItems: ItemAlign.Start：子组件在Flex容器交叉轴（水平方向）上首部对齐。 105 106可以查看[Flex组件](../../reference/arkui-ts/ts-container-flex.md)及[Text组件](../../reference/arkui-ts/ts-basic-components-text.md)了解这两个组件各个属性的含义及详细用法。 107 108 | 默认设备 | 平板 | 109| -------- | -------- | 110|  |  | 111 112 113``` 114@Component 115 struct TopArea { 116 build() { 117 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, 118 alignItems: ItemAlign.Start}) { 119 Text('张三').fontSize(16).fontColor("#182431") 120 Text('+123 4567 8901').fontSize(14).fontColor("#66182431") 121 } 122 } 123 } 124``` 125 126接下来我们通过width属性和height属性设置四个图标的宽高（详见[尺寸设置](../../reference/arkui-ts/ts-universal-attributes-size.md)），并将它们与联系人姓名和电话以及Blank组件一起放到Flex父容器中。为了便于查看效果，对顶部标题栏设置了淡蓝色的背景色。 127 128 | 默认设备 | 平板 | 129| -------- | -------- | 130|  |  | 131 132 133``` 134@Component 135 struct TopArea { 136 build() { 137 Flex({ alignItems: ItemAlign.Center }) { 138 Image($r('app.media.back')) 139 .width(24) 140 .height(24) 141 Image($r('app.media.contact')) 142 .width(40) 143 .height(40) 144 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, 145 alignItems: ItemAlign.Start}) { 146 Text('张三').fontSize(16).fontColor("#182431") 147 Text('+123 4567 8901').fontSize(14).fontColor("#66182431") 148 } 149 Blank() // 拉伸能力 150 Image($r("app.media.call")) 151 .width(24) 152 .height(24) 153 Image($r('app.media.dots')) 154 .width(24) 155 .height(24) 156 } 157 .width('100%') 158 .height(56) 159 .backgroundColor('#87CEFA') // 顶部标题栏背景色，仅用于开发测试 160 } 161 } 162``` 163 164当前标题栏中子组件的布局同预期还有些差异，接下来通过margin属性，设置各个元素的左右间距（详见[尺寸设置](../../reference/arkui-ts/ts-universal-attributes-size.md)）。如下图所示，最终顶部工具栏在默认设备和平板上都可以达到预期显示效果。 165 166 | 默认设备 | 平板 | 167| -------- | -------- | 168|  |  | 169 170 171``` 172@Component 173 struct TopArea { 174 build() { 175 Flex({ alignItems: ItemAlign.Center }) { 176 Image($r('app.media.back')) 177 .width(24) 178 .height(24) 179 .margin({ left:24 }) // 设置间距 180 Image($r('app.media.contact')) 181 .width(40) 182 .height(40) 183 .margin({ left:16, right:16 }) // 设置间距 184 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, 185 alignItems: ItemAlign.Start}) { 186 Text('张三').fontSize(16).fontColor("#182431") 187 Text('+123 4567 8901').fontSize(14).fontColor("#66182431") 188 } 189 Blank() 190 Image($r("app.media.call")) 191 .width(24) 192 .height(24) 193 Image($r('app.media.dots')) 194 .width(24) 195 .height(24) 196 .margin({ left:16, right:24 }) // 设置间距 197 } 198 .width('100%') 199 .height(56) 200 .backgroundColor('#87CEFA') // 顶部标题栏背景色，仅用于开发测试 201 } 202 } 203``` 204 205 206### 底部输入栏 207 208有了顶部工具栏的开发经验，可以发现底部输入栏的结构更为简单，它同样以Flex组件作为父容器，同时包含文本输入框（请访问[文本输入组件](../../reference/arkui-ts/ts-basic-components-textarea.md)查看详细介绍）和消息发送图标两个子节点。 209 210 211 212为了便于查看的效果，我们同样给底部输入栏设置了淡蓝色到背景色。注意这里有一个特殊的地方，我们给TextArea设置了flexGrow(1)属性。flexGrow属性仅在父组件是Flex组件时生效，表示Flex容器的剩余空间分配给此属性所在的组件的比例，flexGrow(1)表示父容器的剩余空间全部分配给此组件，详见[Flex布局](../../reference/arkui-ts/ts-universal-attributes-flex-layout.md)。 213 214 | 默认设备 | 平板 | 215| -------- | -------- | 216|  |  | 217 218 219``` 220@Component 221 struct BottomArea { 222 build() { 223 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 224 TextArea({ placeholder:'短信' }) 225 .placeholderColor("#99000000") 226 .caretColor("#007DFF") 227 .backgroundColor("#F1F3F5") 228 .borderRadius(20) 229 .height(40) 230 .flexGrow(1) // 将父容器的剩余空间全部分配给此组件 231 232 Image($r("app.media.send")) 233 .height(36) 234 .width(36) 235 .opacity(0.4) 236 .margin({ left:12 }) 237 } 238 .height(72) 239 .width('100%') 240 .padding({ left:24, right:24, bottom:8, top:8 }) 241 .backgroundColor('#87CEFA') // 底部输入栏背景色，仅用于开发测试 242 } 243 } 244``` 245 246 247### 信息列表 248 249观察信息列表区域，可以发现它是由一个个消息气泡组成的，另外消息气泡在默认设备和平板上的布局有差异。本小节将围绕如下两个主题介绍如何实现消息列表。 250 251- 如何实现自定义消息气泡组件。 252 253- 如何在默认设备和平板上自适应布局。 254 255 | 默认设备 | 平板 | 256 | -------- | -------- | 257 |  |  | 258 259**消息气泡** 260 261先做一个最简单的消息气泡，通过borderRadius属性可以设置边框的圆角半径（详见[边框设置](../../reference/arkui-ts/ts-universal-attributes-border.md)）。 262 263 | 默认设备 | 平板 | 264| -------- | -------- | 265|  |  | 266 267 268``` 269@Component 270struct MessageBubble { 271 private content: string = "OpenHarmony" 272 273 build() { 274 Column() { 275 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) { 276 Text(this.content) 277 .fontSize(16) 278 .lineHeight(21) 279 .padding({ left: 12, right: 12, top: 8, bottom: 8 }) 280 .backgroundColor("#C0EBDF") 281 .borderRadius(24) 282 .fontColor("#182431") 283 }.width('100%') 284 } 285 .margin({left: 24, right: 24 }) 286 .backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试 287 } 288} 289``` 290 291注意这个简单的消息气泡，左上角（或右上角）的样式，与实际期望不符。我们先修改发送消息右上角的样式，接收消息左上角的实现与之类似。 292 293[Stack组件](../../reference/arkui-ts/ts-container-stack.md)是一个堆叠容器，其子组件按照轴方向依次堆叠，后一个子组件覆盖前一个子组件。通过其alignContent接口，可以设置子组件在容器内的对齐方式，如alignContent: Alignment.TopStart代表子组件从左上角对齐。 294 295 | 默认设备 | 平板 | 296| -------- | -------- | 297|  |  | 298 299 300``` 301@Component 302struct MessageBubble { 303 private content: string = "OpenHarmony" 304 private time: string = "今天 上午 10:35" 305 306 build() { 307 Column() { 308 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) { 309 Stack({ alignContent: Alignment.TopEnd }) { // 在左上角堆叠一个小色块 310 Column() 311 .backgroundColor("#C0EBDF") 312 .borderRadius(4) 313 .width(24) 314 .height(24) 315 Text(this.content) 316 .fontSize(16) 317 .lineHeight(21) 318 .padding({ left: 12, right: 12, top: 8, bottom: 8 }) 319 .backgroundColor("#C0EBDF") 320 .borderRadius(24) 321 .fontColor("#182431") 322 } 323 }.width('100%') 324 } 325 .margin({left: 24, right: 24 }) 326 .backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试 327 } 328} 329``` 330 331接下来我们在消息气泡下方加上时间显示，如下图所示，一个消息气泡自定义组件就基本完成了。 332 333 | 默认设备 | 平板 | 334| -------- | -------- | 335|  |  | 336 337 338``` 339@Component 340struct MessageBubble { 341 private content: string = "OpenHarmony" 342 private time: string = "上午 10:35" 343 344 build() { 345 Column() { 346 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) { 347 Stack({ alignContent: Alignment.TopEnd }) { 348 Column() 349 .backgroundColor("#C0EBDF") 350 .borderRadius(4) 351 .width(24) 352 .height(24) 353 Text(this.content) 354 .fontSize(16) 355 .lineHeight(21) 356 .padding({ left: 12, right: 12, top: 8, bottom: 8 }) 357 .backgroundColor("#C0EBDF") 358 .borderRadius(24) 359 .fontColor("#182431") 360 } 361 }.width('100%') 362 363 // 在消息气泡底部增加时间显示 364 Flex({ alignItems: ItemAlign.Center, direction: FlexDirection.Row, 365 justifyContent: FlexAlign.End}) { 366 Text(this.time) 367 .textAlign(TextAlign.Start) 368 .fontSize(10) 369 .lineHeight(13) 370 .fontColor("#99182431") 371 }.width('100%').margin({ left: 12, right: 0 }) 372 } 373 .margin({left: 24, right: 24 }) 374 .backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试 375 } 376} 377``` 378 379发送出的消息和接收到的消息的消息气泡结构基本一致，可以通过增加一个标志位，让两种消息共用MessageBubble这个自定义组件，代码如下所示。将这个标志位设置true，可以查看接收消息的效果。 380 381 | 默认设备 | 平板 | 382| -------- | -------- | 383|  |  | 384 385 386``` 387@Component 388 struct MessageBubble { 389 private isReceived:boolean = false // 通过标志位，判断是发送or接收场景，进而使用不同的样式 390 private content:string = "OpenHarmony" 391 private time:string = "今天 10:00" 392 393 build() { 394 Column() { 395 Flex({ justifyContent:this.isReceived? FlexAlign.Start: FlexAlign.End, 396 alignItems: ItemAlign.Center }) { 397 Stack({ alignContent:this.isReceived? Alignment.TopStart: Alignment.TopEnd }) { 398 Column() 399 .backgroundColor(this.isReceived?"#FFFFFF":"#C0EBDF") 400 .borderRadius(4) 401 .width(24) 402 .height(24) 403 Text(this.content) 404 .fontSize(16) 405 .lineHeight(21) 406 .padding({ left:12, right:12, top:8, bottom:8 }) 407 .backgroundColor(this.isReceived?"#FFFFFF":"#C0EBDF") 408 .borderRadius(24) 409 .fontColor("#182431") 410 } 411 }.width('100%') 412 413 Flex({ alignItems: ItemAlign.Center, direction: FlexDirection.Row, 414 justifyContent:this.isReceived? FlexAlign.Start: FlexAlign.End }) { 415 Text(this.time) 416 .textAlign(TextAlign.Start) 417 .fontSize(10) 418 .lineHeight(13) 419 .fontColor("#99182431") 420 }.width('100%') 421 .margin({ left:this.isReceived?12:0, right:this.isReceived?0:12 }) 422 } 423 .margin({left:24, right:24 }) 424 .backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试 425 } 426 } 427``` 428 429**栅格布局** 430 431回顾方舟开发框架一多能力，消息气泡在默认设备和平板上布局不同，可以借助栅格布局来解决。为了方便测试，我们预定义一个全局数组。 432 433 434``` 435const globalMessageList:any[] = [ 436 { 437 'time':'上午 10:20', 438 'content':'项目介绍', 439 'isReceived':false 440 }, 441 { 442 'time':'上午 10:28', 443 'content':'OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。', 444 'isReceived':false 445 },{ 446 'time':'上午 10:32', 447 'content':'技术架构', 448 'isReceived':true 449 }, 450 { 451 'time':'上午 10:35', 452 'content':'OpenHarmony整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的组件。', 453 'isReceived':true 454 } 455 ] 456``` 457 458结合[栅格组件](../../reference/arkui-ts/ts-container-gridcontainer.md)的定义，考虑我们当前的实际场景，GridRow的各参数设置如下。 459 460- columns：栅格组件中的列数，当前场景默认12列即可。 461 462- gutter：栅格布局列间距，当前场景未使用该参数，默认设置为0即可。 463 464- margin： 栅格布局两侧间距，在开发消息气泡组件时，已经设置了左右间距，故该属性也默认配置为0。 465 466栅格中仅包含我们自定义的消息气泡组件，该组件在各断点上的参数配置如下。 467 468 | 断点 | 窗口宽度(vp) | 栅格总列数 | 消息气泡占用的列数 | 接收场景偏移的列数 | 发送场景偏移的列数 | 469| -------- | -------- | -------- | -------- | -------- | -------- | 470| sm | [320, 520) | 12 | 12 | 0 | 0 | 471| md | [520, 840) | 12 | 8 | 0 | 4 | 472| lg | [840, +∞) | 12 | 8 | 0 | 4 | 473 474 | 默认设备 | 平板 | 475| -------- | -------- | 476|  |  | 477 478 479``` 480@Component 481export default struct MessageItem { 482 private isReceived: boolean 483 private content: string 484 private time: string 485 486 build() { 487 GridRow() { 488 GridCol({span: {sm: 12, md: 8, lg: 8}, 489 offset: {sm: 0, md: this.isReceived? 0 : 4, lg: this.isReceived? 0 : 4}}) { 490 Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.End }) { 491 MessageBubble({ 492 isReceived: this.isReceived, 493 content: this.content, 494 time: this.time 495 }) 496 } 497 } 498 } 499 } 500} 501 502@Entry 503@Component 504struct Conversation { 505 build() { 506 Column() { // 验证效果 507 MessageItem({ 508 isReceived: globalMessageList[1].isReceived, 509 content: globalMessageList[1].content, 510 time: globalMessageList[1].time 511 }) 512 MessageItem({ 513 isReceived: globalMessageList[3].isReceived, 514 content: globalMessageList[3].content, 515 time: globalMessageList[3].time 516 }) 517 }.backgroundColor('#87CEFA') // 消息背景色，仅用于开发和测试 518 } 519} 520``` 521 522 523### 组合成型 524 525现在会话详情页面的顶部标题栏、信息列表及底部输入栏都已经准备完毕，将这三部分组合起来即可得到完整的页面。 526 527- 通过[Flex组件](../../reference/arkui-ts/ts-container-flex.md)将三个部分组合起来，注意justifyContent: FlexAlign.SpaceBetween配置项是将Flex组件中的元素按照主轴方向均匀分配，其中第一个元素与顶部对齐，最后一个元素与底部对齐。 528 529- 通过[List组件](../../reference/arkui-ts/ts-container-list.md)和[ForEach语法](../../quick-start/arkts-rendering-control-foreach.md)，显示整个消息列表。 530 531 | 默认设备 | 平板 | 532 | -------- | -------- | 533 |  |  | 534 535 536``` 537@Entry 538 @Component 539 struct Conversation { 540 build() { 541 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, 542 justifyContent: FlexAlign.SpaceBetween }) { 543 Column() { 544 TopArea() // 顶部标题栏 545 List() { // 消息列表 546 ForEach(globalMessageList, (item, index) => { 547 ListItem() { 548 MessageItem({ 549 isReceived: item.isReceived, 550 content: item.content, 551 time: item.time 552 }) 553 }) 554 } 555 .listDirection(Axis.Vertical) 556 .edgeEffect(EdgeEffect.Spring) 557 } 558 BottomArea() // 底部输入栏 559 } 560 .backgroundColor("#F1F3F5") 561 .width('100%') 562 .height('100%') 563 } 564 } 565``` 566 567 568## 总结 569 570短信应用在默认设备和平板上的功能完全相同，因此选择了部署模型A。借助方舟开发框架一多能力，短信应用实现了在默认设备和平板上共用同一份代码，同时自然也共用安装包。 571 572在实际开发过程中，会话详情页面需要从底层做数据交互，同时还要支持信息选择、信息删除、信息发送状态、输入框与输入法联动等等功能，会比本小节中介绍的基础版本复杂很多。读者如果对这部分感兴趣，可以访问[短信应用开源代码仓](https://gitee.com/openharmony/applications_mms/tree/master)，了解会话详情页面的详细实现。 573
