本书以仓颉的UI实战为主，语法部分介绍了主要组成部分，快速且形象地阐述了仓颉编程语言的主要特性，让零编程基础的新手都可以迅速入门仓颉，在此基础上结合互联网热门垂直领域的潮流App设计，带您深入场景式UI开发体验。利用CangjieUI 鸿蒙的组合，能够让我们在开发基于DSL的App应用时超快上手，从而可以快速开发基于鸿蒙乃至跨平台的应用UI。
本书共两部分。第1~9章介绍仓颉基础编程知识，从零起步介绍了仓颉主要特性如面向对象编程、面向接口编程、函数式编程等，聚焦在语法层面。第10~21章基于强大的CangjieUI框架，实际切入各种场景化的精美AppUI开发案例，助力读者彻底地掌握使用CangjieUI框架开发各种复杂AppUI的技巧。本书案例丰富，实操性系统性强，辅助读者更快地掌握本书的要点、难点。
本书既可以成为仓颉初学者的入门书，也可以为想从事仓颉应用开发的人士或培训机构，提供前置知识参考。

本书是一本基础快速入门加UI实战的书，有基础知识，有丰富示例，还有详细的操作步骤，实操性非常强。本书第1~9章介绍仓颉基础编程知识，第10~21章属于UI实战案例，这些例子彼此之间相互独立，读者在掌握了前面的基础知识后，可以通过11个非常有代表性的App案例项目来全面掌握CangjieUI的开发过程。

　　近年来，随着信息产业的国产化浪潮席卷而来，与芯片、操作系统、应用框架、编程语言相关的基础设施如雨后春笋般崛起。在这个历史机遇下，以华为公司为代表的一些领头羊企业成为弄潮儿。OpenHarmony打响了国产自主操作系统的第一枪，而且众多与OpenHarmony生态相关的公司正在诞生。可以预见，OpenHarmony可以成为与Android、 iOS两大移动端操作系统比肩的新力量，将来甚至可达到与macOS、Windows等桌面端系统的高度，而华为的另一力作仓颉编程语言，必将是OpenHarmony之上的坚实代码 依靠。
　　本书以仓颉的UI实战为主，语法部分介绍了仓颉编程语言的主要组成部分，形象地阐述了仓颉编程语言的主要特性，让零编程基础的新手也可以迅速入门仓颉，在此基础上结合互联网热门垂直领域的潮流App设计，带领读者深入场景式UI开发体验。利用CangjieUI OpenHarmony的组合，能够让读者在开发基于DSL的App时超快上手，从而可以快速开发基于OpenHarmony乃至跨平台的应用UI。
本书主要内容
　　本书内容是笔者在充分实践的过程中总结归纳得出的，一共分为两部分，内容如下：
　　第1章概要介绍仓颉的定位和主要特性。
　　第2章介绍如何开发第1个仓颉Hello?World程序。
　　第3章从一个日常生活的应用场景引出仓颉的语法基础，让读者快速入门这门语言的大部分主要内容。
　　第4章介绍仓颉语法中的高级类型和类型转换。
　　第5章介绍仓颉的面向接口编程理念。
　　第6章介绍仓颉的函数式编程特性及一些常用的高级函数。
　　第7章介绍当程序遇到异常时，在仓颉语言中是如何处理的，包括现代编程语言中对空的新式处理。
　　第8章介绍非常流行的泛型编程，以及泛型接口和泛型约束等新奇方法。
　　第9章描述在仓颉语言中对异步编程和多线程的处理。
　　第10章开始全面介绍仓颉的UI框架，以及CangjieUI的基本使用方法。
　　第11章以咖啡杯的杯型选择为例，介绍CangjieUI中构建互动式UI的精髓要点，学完此章便可掌握如何快速构建App的UI组件。
　　第12章给出一个耳目一新的创意应用飞我电瓶车，以打电瓶车为例，构建一个相关的整体UI。
　　第13章介绍一个智能家居控制的应用鸿蒙之家，覆盖了家庭内常用的智能化电器控制总览、单独控制的UI及用电量的柱状图统计互动实现，其中有网格组件Grid的使用，并且实现了一个系统尚未提供开关组件的从零开始的UI和互动实现。
　　第14章描绘一个非常经典的租车应用主要页面的实现，以及滚动列表的应用。
　　第15章带来笔者在HarmonyOS开发者创新大赛中决赛获奖作品智能打蒜器第1个版本的UI实现。
　　第16章是一个日常生活中使用频率高的应用绝汁水果。实现一个瀑布流的水果缩略图布局，以及页面式按钮的实现。在页面过渡时，首次使用了共享转场的视觉特效，非常惊艳。
　　第17章使用一些CangjieUI中的动画特效实现了一个旅游应用畅游。启动页第一眼看过去就会让用户产生旅游的冲动，首页和内页的配合和布局恰到好处，可满足用户追求高端素雅的旅游产品需求。
　　第18章来到一个音乐应用起司播客。作为用户经常使用的一种类型应用，如何布局和配色达到艺术审美是非常重要的。超美且简洁的UI是用户使用音乐类App的一大要素。
　　第19章通过一个风格化的旅游拼团App，来介绍如何通过渐变、瀑布流、头像堆叠等CangjieUI中的经典用法，实现一个有深度的文化类应用。
　　第20章以一个Web端的生鲜配送网站为例，介绍CangjieUI在大尺寸屏幕上布局的应用能力。
　　第21章以一个炫彩流光的美妆电商网站为例，介绍如何制作复杂层次感和在深色系统主题背景下的高级UI组合。为最终使用CangjieUI实现复杂精美的平面应用UI布局打下坚实基础。
阅读建议
　　本书是一本基础快速入门加UI实战的书，有基础知识，有丰富示例，还有详细的操作步骤，实操性非常强。仓颉语言内容较多且处于发展阶段，所以本书力求精简，提供了代码供读者参照，由于Cangjie和CangjieUI框架更新比较快，建议读者届时获取最新的源代码以便可以立即复刻出效果。
　　本书从第10章开始讲解UI实战案例，读者在掌握了前面的基础知识后，可以通过 11个非常有代表性的App案例项目来全面掌握CangjieUI的开发过程。不过读者无须按部就班地按书中的顺序学习这些案例，因为这些例子彼此之间相互独立，任意选择其中一章开始即可。
本书源代码和配套资源
　　扫描下方二维码，可获取本书源代码，以及第11~21章的工程图片资源。

本书配套资源
致谢
　　首先感谢家人在笔者写作过程中的理解和鼓励，使本书的顺利出版成为可能，写作期间一直得到华为仓颉团队的技术支持，在此表示衷心感谢；其次感谢清华大学出版社赵佳霓编辑的耐心帮助。
　　由于水平和时间的限制，本书难免存在疏漏之处，请读者见谅并不吝提出宝贵意见。
　　
　　 张云波
　　2024年5月

II

III

张云波 ，一个喜欢尝试前沿领域的自由程序员，花川学院创始人、华为开发专家（Huawei Developer Experts，HDE）、首届HarmonyOS开发者创新大赛导师、第二届HarmonyOS开发者创新大赛科技创新奖得主、51CTO开源技术社区MVP、润和软件HiHope社区专家、未来杯HarmonyOS技术应用创新大赛导师。曾就职于IBM、SAP、SONY等公司，具有丰富的工作经验。从苹果Swift、微信小程序、区块链，到如今的鸿蒙和仓颉，自然不能错过，希望可以亲眼见证IT行业国产化的深度崛起。

第1章 仓颉概览 1
1.1 仓颉的定位 1
1.2 仓颉主要特性 1
第2章 第1个仓颉程序 4
2.1 安装及查看仓颉版本 4
2.2 Hello World 5
2.2.1 编写第1个程序 5
2.2.2 代码编译和执行 5
第3章 仓颉语法基础 6
3.1 常量和变量 6
3.2 类型自动推断 8
3.3 两种数值类型 8
3.4 布尔类型 8
3.5 流向控制 9
3.6 字符串类型 11
3.7 区间类型 12
3.8 循环控制 12
3.9 字符串插值 13
3.10 函数 13
3.11 运算符 16
3.12 使用库函数 16
3.13 使用集合类型 17
3.14 本章小结 20
第4章 高级类型 21
4.1?记录类型 21
4.2?枚举类型 24
4.3?类 25
4.3.1?类的封装 25
4.3.2?类的继承和多态 29
4.4?类型转换 33
4.5?本章小结 37
第5章 面向接口编程 38
5.1 接口 38
5.2 扩展既有类型 40
5.3 面向接口编程 41
5.4 定义基础接口 43
5.5 实现接口的类型 44
5.6 给接口扩展默认的实现 53
5.7 枚举类型的接口实现 55
5.8 覆盖默认行为 55
5.9 接口的通用化 56
5.10 本章小结 58
第6章 函数高级特性 59
6.1 函数类型 59
6.2 使用函数类型的3种方式 60
6.3 闭包表达式 62
6.4 尾随闭包 63
6.5 函数重载 65
6.6 构造函数 66
6.7 系统中的高级函数 66
6.7.1 map 67
6.7.2 compactMap 68
6.7.3 filter 68
6.7.4 reduce 68
6.8 本章小结 69
第7章 程序异常处理 70
7.1 异常的分类 70
7.2 抛出一个异常 71
7.3 Result类型 73
7.4 解包Result类型 74
7.5 Option类型 76
7.6 本章小结 77
第8章 泛型编程 78
8.1 常见的泛型化案例 78
8.2 泛型接口 79
8.3 泛型类型 81
8.4 泛型函数 83
8.5 泛型约束 83
8.6 本章小结 84
第9章 异步编程 85
9.1 新线程 85
9.2 异步等待 92
9.3 线程休眠 103
第10章 仓颉UI框架 104
10.1 文件组织 104
10.2 声明式语法 105
10.3 状态管理 105
10.4 生命周期 107
10.5 装饰器变量 107
10.6 样式 108
10.7 常用组件 109
10.7.1 容器组件 109
10.7.2 独立组件 112
10.8 系统接口现状 115
第11章 仓颉UI实战案例：咖啡杯 116
11.1 杯型定义 117
11.2 定义资源 118
11.2.1 图片资源 118
11.2.2 文字资源 118
11.2.3 颜色资源 119
11.3 新建组件的源码文件 120
11.4 数据源和状态变量定义 120
11.5 单个杯型的布局 121
11.6 样式定义 121
11.7 条件样式 122
11.8 用户互动 122
11.9 循环渲染 123
11.10 容器包装 124
11.10.1 序号显示 124
11.10.2 均分空间 125
11.10.3 描边和圆角 126
11.11 组合 127
11.12 组件重用 128
第12章 仓颉UI案例：飞我电瓶车 130
12.1 资源导入 131
12.2 启动页结构 131
12.3 最终启动页 137
12.4 加载指示器组件 140
12.4.1 组件结构 140
12.4.2 旋转动画 141
12.5 目的地页 141
12.5.1 历史数据 141
12.5.2 状态变量 142
12.5.3 下单函数 142
12.5.4 弹性面板组件 143
12.5.5 List组件 143
12.5.6 组合 144
12.6 下单成功提示页 149
12.6.1 状态变量 149
12.6.2 纯组件 150
12.6.3 预览用组件 152
12.6.4 组合 153
12.7 骑手当前位置页 156
12.7.1 状态变量 156
12.7.2 纯组件 157
12.7.3 预览用组件 158
第13章 仓颉UI案例：鸿蒙之家 160
13.1 资源导入 160
13.2 启动页 161
13.2.1 横幅数据 161
13.2.2 组件结构 162
13.2.3 开始按钮 163
13.3 首页 164
13.3.1 全屋智能家电数据 164
13.3.2 导航区域 165
13.3.3 数据网格 166
13.3.4 选项条 169
13.3.5 组合 170
13.4 开关组件 170
13.4.1 组件结构 170
13.4.2 状态变量 171
13.4.3 颜色定义 171
13.4.4 单击动画 171
13.4.5 纯组件 172
13.4.6 预览用组件 172
13.4.7 组合 173
13.5 房屋智能读数结构 173
13.6 用电量组件 174
13.6.1 状态变量 174
13.6.2 组件结构 175
13.6.3 组合测试 177
13.7 详情页 181
13.7.1 状态变量 181
13.7.2 导航栏 182
13.7.3 温湿度卡片 182
13.7.4 用电量柱状图 184
13.7.5 设备列表卡片 184
13.7.6 组合测试 187
第14章 仓颉UI案例：卡星租车 196
14.1 资源导入 198
14.2 启动页结构 199
14.2.1 跃动的标志 199
14.2.2 中部文本 200
14.2.3 底部按钮 201
14.2.4 组合 202
14.3 车型数据结构 202
14.4 地图定位页 203
14.5 预订页 205
14.5.1 搜索栏 206
14.5.2 标题栏 207
14.5.3 筛选栏 207
14.5.4 车型列表区域 209
14.5.5 组合 213
14.6 车型详情页 213
14.6.1 状态变量 214
14.6.2 纯组件 214
14.6.3 组合 223
第15章 仓颉UI案例：智能打蒜器 224
15.1 资源导入 225
15.2 首页结构 226
15.3 功能层 226
15.3.1 状态变量 226
15.3.2 面板控制区域 226
15.3.3 文字提示区域 227
15.4 开关灯指示层 227
第16章 仓颉UI案例：绝汁水果 229
16.1 资源导入 230
16.2 启动页结构 231
16.2.1 横幅数据 231
16.2.2 横幅组件 231
16.2.3 进入按钮 233
16.2.4 组合 233
16.3 首页 234
16.3.1 状态变量 234
16.3.2 标题栏 236
16.3.3 水果卡片 237
16.3.4 组合 240
16.4 详情页 240
16.4.1 状态变量 241
16.4.2 添加至购物车函数 241
16.4.3 页面结构 242
16.4.4 组合 246
第17章 仓颉UI案例：畅游 247
17.1 资源导入 248
17.2 启动页结构 249
17.2.1 背景层 249
17.2.2 文字层 250
17.2.3 动效层 252
17.2.4 组合 254
17.3 首页 255
17.3.1 旅游产品数据 255
17.3.2 状态变量 256
17.3.3 导航栏 256
17.3.4 文字栏 257
17.3.5 筛选栏 257
17.3.6 旅游卡片列表 258
17.3.7 选项卡 260
17.3.8 组合 261
17.4 详情页 262
17.4.1 状态变量 262
17.4.2 背景层 262
17.4.3 导航栏 262
17.4.4 品名和价格区 263
17.4.5 预订区 265
17.4.6 组合 268
第18章 仓颉UI案例：起司播客 270
18.1 资源导入 271
18.2 首页结构 272
18.2.1 导航栏 272
18.2.2 分类标题 273
18.2.3 分类卡片列表 273
18.2.4 筛选栏 278
18.2.5 音乐列表 280
18.2.6 组合 284
18.3 频道页 285
18.3.1?播客作品数据 285
18.3.2 导航栏 286
18.3.3 播客个人信息区域 286
18.3.4 播客作品列表 287
18.3.5 组合 289
18.4 播放页 290
18.4.1 状态变量 290
18.4.2 导航栏 291
18.4.3 作品大图 292
18.4.4 作品名和作者 292
18.4.5 播放控制按钮 293
18.4.6 组合 294
第19章 仓颉UI案例：世界巡游团 295
19.1 资源导入 296
19.2 启动页 297
19.2.1 封面组件 297
19.2.2 启动按钮组件 302
19.2.3 背景色 303
19.2.4 右侧封面修正 303
19.2.5 组合 304
19.3 首页 306
19.3.1 导航组件 306
19.3.2 口号文字组件 308
19.3.3 搜索条组件 309
19.3.4 筛选按钮栏 311
19.3.5 推荐卡片列表组件 315
19.3.6 选项卡组件 331
19.3.7 首页的调整优化 335
19.4 详情页 338
19.4.1 导航栏 338
19.4.2 缩略图列表 340
19.4.3 详情卡片 342
19.4.4 组合 350
第20章 仓颉UI案例：生鲜配送网 353
20.1 资源导入 354
20.2 首页结构 355
20.3 导航 355
20.3.1 阴影层 356
20.3.2 菜单层 357
20.3.3 菜单阴影效果 357
20.3.4 菜单内容 358
20.4 上半部分 362
20.4.1 背景图片层 363
20.4.2 主题文字层 367
20.4.3 右侧指示图片层 371
20.4.4 组合 372
20.5 中间部分 379
20.6 下半部分 380
20.6.1 卡片结构 380
20.6.2 卡片背景 381
20.6.3 卡片内容 383
20.6.4 卡片列表 388
20.6.5 卡片列表容器背景 393
20.6.6 组合 394
20.7 下半屏预览 395
第21章 仓颉UI案例：溢彩美妆网 397
21.1 资源导入 398
21.2 启动页结构 399
21.3 背景层 399
21.3.1 渐变流动光影 399
21.3.2 图形衬边 401
21.3.3 组合 407
21.4 导航 410
21.4.1 大标题 410
21.4.2 导航菜单 410
21.4.3 右侧图标组 411
21.4.4 组合 412
21.5 主题文字区 414
21.5.1 小标题 414
21.5.2 大标题 415
21.5.3 副标题 416
21.5.4 按钮组 416
21.5.5 组合 417
21.6 图片区 420
21.6.1 双卡片组 420
21.6.2 横幅卡片 421
21.6.3 组合 421
21.7 评价浮层 424
21.7.1 评价卡片 424
21.7.2 评价头像 425
21.7.3 组合 425
21.8 组装首页 427

　　
VI

VII