本書以倉頡的UI實(shí)戰(zhàn)為主，語法部分介紹了主要組成部分，快速且形象地闡述了倉頡編程語言的主要特性，讓零編程基礎(chǔ)的新手都可以迅速入門倉頡，在此基礎(chǔ)上結(jié)合互聯(lián)網(wǎng)熱門垂直領(lǐng)域的潮流App設(shè)計，帶您深入場景式UI開發(fā)體驗。利用CangjieUI 鴻蒙的組合，能夠讓我們在開發(fā)基于DSL的App應(yīng)用時超快上手，從而可以快速開發(fā)基于鴻蒙乃至跨平臺的應(yīng)用UI。
本書共兩部分。第1~9章介紹倉頡基礎(chǔ)編程知識，從零起步介紹了倉頡主要特性如面向?qū)ο缶幊獭⒚嫦蚪涌诰幊�、函�?shù)式編程等，聚焦在語法層面。第10~21章基于強(qiáng)大的CangjieUI框架，實(shí)際切入各種場景化的精美AppUI開發(fā)案例，助力讀者徹底地掌握使用CangjieUI框架開發(fā)各種復(fù)雜AppUI的技巧。本書案例豐富，實(shí)操性系統(tǒng)性強(qiáng)，輔助讀者更快地掌握本書的要點(diǎn)、難點(diǎn)。
本書既可以成為倉頡初學(xué)者的入門書，也可以為想從事倉頡應(yīng)用開發(fā)的人士或培訓(xùn)機(jī)構(gòu)，提供前置知識參考。

本書是一本基礎(chǔ)快速入門加UI實(shí)戰(zhàn)的書，有基礎(chǔ)知識，有豐富示例，還有詳細(xì)的操作步驟，實(shí)操性非常強(qiáng)。本書第1~9章介紹倉頡基礎(chǔ)編程知識，第10~21章屬于UI實(shí)戰(zhàn)案例，這些例子彼此之間相互獨(dú)立，讀者在掌握了前面的基礎(chǔ)知識后，可以通過11個非常有代表性的App案例項目來全面掌握CangjieUI的開發(fā)過程。

　　近年來，隨著信息產(chǎn)業(yè)的國產(chǎn)化浪潮席卷而來，與芯片、操作系統(tǒng)、應(yīng)用框架、編程語言相關(guān)的基礎(chǔ)設(shè)施如雨后春筍般崛起。在這個歷史機(jī)遇下，以華為公司為代表的一些領(lǐng)頭羊企業(yè)成為弄潮兒。OpenHarmony打響了國產(chǎn)自主操作系統(tǒng)的第一槍，而且眾多與OpenHarmony生態(tài)相關(guān)的公司正在誕生。可以預(yù)見，OpenHarmony可以成為與Android、 iOS兩大移動端操作系統(tǒng)比肩的新力量，將來甚至可達(dá)到與macOS、Windows等桌面端系統(tǒng)的高度，而華為的另一力作倉頡編程語言，必將是OpenHarmony之上的堅實(shí)代碼 依靠。
　　本書以倉頡的UI實(shí)戰(zhàn)為主，語法部分介紹了倉頡編程語言的主要組成部分，形象地闡述了倉頡編程語言的主要特性，讓零編程基礎(chǔ)的新手也可以迅速入門倉頡，在此基礎(chǔ)上結(jié)合互聯(lián)網(wǎng)熱門垂直領(lǐng)域的潮流App設(shè)計，帶領(lǐng)讀者深入場景式UI開發(fā)體驗。利用CangjieUI OpenHarmony的組合，能夠讓讀者在開發(fā)基于DSL的App時超快上手，從而可以快速開發(fā)基于OpenHarmony乃至跨平臺的應(yīng)用UI。
本書主要內(nèi)容
　　本書內(nèi)容是筆者在充分實(shí)踐的過程中總結(jié)歸納得出的，一共分為兩部分，內(nèi)容如下：
　　第1章概要介紹倉頡的定位和主要特性。
　　第2章介紹如何開發(fā)第1個倉頡Hello?World程序。
　　第3章從一個日常生活的應(yīng)用場景引出倉頡的語法基礎(chǔ)，讓讀者快速入門這門語言的大部分主要內(nèi)容。
　　第4章介紹倉頡語法中的高級類型和類型轉(zhuǎn)換。
　　第5章介紹倉頡的面向接口編程理念。
　　第6章介紹倉頡的函數(shù)式編程特性及一些常用的高級函數(shù)。
　　第7章介紹當(dāng)程序遇到異常時，在倉頡語言中是如何處理的，包括現(xiàn)代編程語言中對空的新式處理。
　　第8章介紹非常流行的泛型編程，以及泛型接口和泛型約束等新奇方法。
　　第9章描述在倉頡語言中對異步編程和多線程的處理。
　　第10章開始全面介紹倉頡的UI框架，以及CangjieUI的基本使用方法。
　　第11章以咖啡杯的杯型選擇為例，介紹CangjieUI中構(gòu)建互動式UI的精髓要點(diǎn)，學(xué)完此章便可掌握如何快速構(gòu)建App的UI組件。
　　第12章給出一個耳目一新的創(chuàng)意應(yīng)用飛我電瓶車，以打電瓶車為例，構(gòu)建一個相關(guān)的整體UI。
　　第13章介紹一個智能家居控制的應(yīng)用鴻蒙之家，覆蓋了家庭內(nèi)常用的智能化電器控制總覽、單獨(dú)控制的UI及用電量的柱狀圖統(tǒng)計互動實(shí)現(xiàn)，其中有網(wǎng)格組件Grid的使用，并且實(shí)現(xiàn)了一個系統(tǒng)尚未提供開關(guān)組件的從零開始的UI和互動實(shí)現(xiàn)。
　　第14章描繪一個非常經(jīng)典的租車應(yīng)用主要頁面的實(shí)現(xiàn)，以及滾動列表的應(yīng)用。
　　第15章帶來筆者在HarmonyOS開發(fā)者創(chuàng)新大賽中決賽獲獎作品智能打蒜器第1個版本的UI實(shí)現(xiàn)。
　　第16章是一個日常生活中使用頻率高的應(yīng)用絕汁水果。實(shí)現(xiàn)一個瀑布流的水果縮略圖布局，以及頁面式按鈕的實(shí)現(xiàn)。在頁面過渡時，首次使用了共享轉(zhuǎn)場的視覺特效，非常驚艷。
　　第17章使用一些CangjieUI中的動畫特效實(shí)現(xiàn)了一個旅游應(yīng)用暢游。啟動頁第一眼看過去就會讓用戶產(chǎn)生旅游的沖動，首頁和內(nèi)頁的配合和布局恰到好處，可滿足用戶追求高端素雅的旅游產(chǎn)品需求。
　　第18章來到一個音樂應(yīng)用起司播客。作為用戶經(jīng)常使用的一種類型應(yīng)用，如何布局和配色達(dá)到藝術(shù)審美是非常重要的。超美且簡潔的UI是用戶使用音樂類App的一大要素。
　　第19章通過一個風(fēng)格化的旅游拼團(tuán)App，來介紹如何通過漸變、瀑布流、頭像堆疊等CangjieUI中的經(jīng)典用法，實(shí)現(xiàn)一個有深度的文化類應(yīng)用。
　　第20章以一個Web端的生鮮配送網(wǎng)站為例，介紹CangjieUI在大尺寸屏幕上布局的應(yīng)用能力。
　　第21章以一個炫彩流光的美妝電商網(wǎng)站為例，介紹如何制作復(fù)雜層次感和在深色系統(tǒng)主題背景下的高級UI組合。為最終使用CangjieUI實(shí)現(xiàn)復(fù)雜精美的平面應(yīng)用UI布局打下堅實(shí)基礎(chǔ)。
閱讀建議
　　本書是一本基礎(chǔ)快速入門加UI實(shí)戰(zhàn)的書，有基礎(chǔ)知識，有豐富示例，還有詳細(xì)的操作步驟，實(shí)操性非常強(qiáng)。倉頡語言內(nèi)容較多且處于發(fā)展階段，所以本書力求精簡，提供了代碼供讀者參照，由于Cangjie和CangjieUI框架更新比較快，建議讀者屆時獲取最新的源代碼以便可以立即復(fù)刻出效果。
　　本書從第10章開始講解UI實(shí)戰(zhàn)案例，讀者在掌握了前面的基礎(chǔ)知識后，可以通過 11個非常有代表性的App案例項目來全面掌握CangjieUI的開發(fā)過程。不過讀者無須按部就班地按書中的順序?qū)W習(xí)這些案例，因為這些例子彼此之間相互獨(dú)立，任意選擇其中一章開始即可。
本書源代碼和配套資源
　　掃描下方二維碼，可獲取本書源代碼，以及第11~21章的工程圖片資源。

本書配套資源
致謝
　　首先感謝家人在筆者寫作過程中的理解和鼓勵，使本書的順利出版成為可能，寫作期間一直得到華為倉頡團(tuán)隊的技術(shù)支持，在此表示衷心感謝；其次感謝清華大學(xué)出版社趙佳霓編輯的耐心幫助。
　　由于水平和時間的限制，本書難免存在疏漏之處，請讀者見諒并不吝提出寶貴意見。
　　
　　 張云波
　　2024年5月

II

III

張云波 ，一個喜歡嘗試前沿領(lǐng)域的自由程序員，花川學(xué)院創(chuàng)始人、華為開發(fā)專家（Huawei Developer Experts，HDE）、首屆HarmonyOS開發(fā)者創(chuàng)新大賽導(dǎo)師、第二屆HarmonyOS開發(fā)者創(chuàng)新大賽科技創(chuàng)新獎得主、51CTO開源技術(shù)社區(qū)MVP、潤和軟件HiHope社區(qū)專家、未來杯HarmonyOS技術(shù)應(yīng)用創(chuàng)新大賽導(dǎo)師。曾就職于IBM、SAP、SONY等公司，具有豐富的工作經(jīng)驗。從蘋果Swift、微信小程序、區(qū)塊鏈，到如今的鴻蒙和倉頡，自然不能錯過，希望可以親眼見證IT行業(yè)國產(chǎn)化的深度崛起。

第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 代碼編譯和執(zhí)行 5
第3章 倉頡語法基礎(chǔ) 6
3.1 常量和變量 6
3.2 類型自動推斷 8
3.3 兩種數(shù)值類型 8
3.4 布爾類型 8
3.5 流向控制 9
3.6 字符串類型 11
3.7 區(qū)間類型 12
3.8 循環(huán)控制 12
3.9 字符串插值 13
3.10 函數(shù) 13
3.11 運(yùn)算符 16
3.12 使用庫函數(shù) 16
3.13 使用集合類型 17
3.14 本章小結(jié) 20
第4章 高級類型 21
4.1?記錄類型 21
4.2?枚舉類型 24
4.3?類 25
4.3.1?類的封裝 25
4.3.2?類的繼承和多態(tài) 29
4.4?類型轉(zhuǎn)換 33
4.5?本章小結(jié) 37
第5章 面向接口編程 38
5.1 接口 38
5.2 擴(kuò)展既有類型 40
5.3 面向接口編程 41
5.4 定義基礎(chǔ)接口 43
5.5 實(shí)現(xiàn)接口的類型 44
5.6 給接口擴(kuò)展默認(rèn)的實(shí)現(xiàn) 53
5.7 枚舉類型的接口實(shí)現(xiàn) 55
5.8 覆蓋默認(rèn)行為 55
5.9 接口的通用化 56
5.10 本章小結(jié) 58
第6章 函數(shù)高級特性 59
6.1 函數(shù)類型 59
6.2 使用函數(shù)類型的3種方式 60
6.3 閉包表達(dá)式 62
6.4 尾隨閉包 63
6.5 函數(shù)重載 65
6.6 構(gòu)造函數(shù) 66
6.7 系統(tǒng)中的高級函數(shù) 66
6.7.1 map 67
6.7.2 compactMap 68
6.7.3 filter 68
6.7.4 reduce 68
6.8 本章小結(jié) 69
第7章 程序異常處理 70
7.1 異常的分類 70
7.2 拋出一個異常 71
7.3 Result類型 73
7.4 解包Result類型 74
7.5 Option類型 76
7.6 本章小結(jié) 77
第8章 泛型編程 78
8.1 常見的泛型化案例 78
8.2 泛型接口 79
8.3 泛型類型 81
8.4 泛型函數(shù) 83
8.5 泛型約束 83
8.6 本章小結(jié) 84
第9章 異步編程 85
9.1 新線程 85
9.2 異步等待 92
9.3 線程休眠 103
第10章 倉頡UI框架 104
10.1 文件組織 104
10.2 聲明式語法 105
10.3 狀態(tài)管理 105
10.4 生命周期 107
10.5 裝飾器變量 107
10.6 樣式 108
10.7 常用組件 109
10.7.1 容器組件 109
10.7.2 獨(dú)立組件 112
10.8 系統(tǒng)接口現(xiàn)狀 115
第11章 倉頡UI實(shí)戰(zhàn)案例：咖啡杯 116
11.1 杯型定義 117
11.2 定義資源 118
11.2.1 圖片資源 118
11.2.2 文字資源 118
11.2.3 顏色資源 119
11.3 新建組件的源碼文件 120
11.4 數(shù)據(jù)源和狀態(tài)變量定義 120
11.5 單個杯型的布局 121
11.6 樣式定義 121
11.7 條件樣式 122
11.8 用戶互動 122
11.9 循環(huán)渲染 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 資源導(dǎo)入 131
12.2 啟動頁結(jié)構(gòu) 131
12.3 最終啟動頁 137
12.4 加載指示器組件 140
12.4.1 組件結(jié)構(gòu) 140
12.4.2 旋轉(zhuǎn)動畫 141
12.5 目的地頁 141
12.5.1 歷史數(shù)據(jù) 141
12.5.2 狀態(tài)變量 142
12.5.3 下單函數(shù) 142
12.5.4 彈性面板組件 143
12.5.5 List組件 143
12.5.6 組合 144
12.6 下單成功提示頁 149
12.6.1 狀態(tài)變量 149
12.6.2 純組件 150
12.6.3 預(yù)覽用組件 152
12.6.4 組合 153
12.7 騎手當(dāng)前位置頁 156
12.7.1 狀態(tài)變量 156
12.7.2 純組件 157
12.7.3 預(yù)覽用組件 158
第13章 倉頡UI案例：鴻蒙之家 160
13.1 資源導(dǎo)入 160
13.2 啟動頁 161
13.2.1 橫幅數(shù)據(jù) 161
13.2.2 組件結(jié)構(gòu) 162
13.2.3 開始按鈕 163
13.3 首頁 164
13.3.1 全屋智能家電數(shù)據(jù) 164
13.3.2 導(dǎo)航區(qū)域 165
13.3.3 數(shù)據(jù)網(wǎng)格 166
13.3.4 選項條 169
13.3.5 組合 170
13.4 開關(guān)組件 170
13.4.1 組件結(jié)構(gòu) 170
13.4.2 狀態(tài)變量 171
13.4.3 顏色定義 171
13.4.4 單擊動畫 171
13.4.5 純組件 172
13.4.6 預(yù)覽用組件 172
13.4.7 組合 173
13.5 房屋智能讀數(shù)結(jié)構(gòu) 173
13.6 用電量組件 174
13.6.1 狀態(tài)變量 174
13.6.2 組件結(jié)構(gòu) 175
13.6.3 組合測試 177
13.7 詳情頁 181
13.7.1 狀態(tài)變量 181
13.7.2 導(dǎo)航欄 182
13.7.3 溫濕度卡片 182
13.7.4 用電量柱狀圖 184
13.7.5 設(shè)備列表卡片 184
13.7.6 組合測試 187
第14章 倉頡UI案例：卡星租車 196
14.1 資源導(dǎo)入 198
14.2 啟動頁結(jié)構(gòu) 199
14.2.1 躍動的標(biāo)志 199
14.2.2 中部文本 200
14.2.3 底部按鈕 201
14.2.4 組合 202
14.3 車型數(shù)據(jù)結(jié)構(gòu) 202
14.4 地圖定位頁 203
14.5 預(yù)訂頁 205
14.5.1 搜索欄 206
14.5.2 標(biāo)題欄 207
14.5.3 篩選欄 207
14.5.4 車型列表區(qū)域 209
14.5.5 組合 213
14.6 車型詳情頁 213
14.6.1 狀態(tài)變量 214
14.6.2 純組件 214
14.6.3 組合 223
第15章 倉頡UI案例：智能打蒜器 224
15.1 資源導(dǎo)入 225
15.2 首頁結(jié)構(gòu) 226
15.3 功能層 226
15.3.1 狀態(tài)變量 226
15.3.2 面板控制區(qū)域 226
15.3.3 文字提示區(qū)域 227
15.4 開關(guān)燈指示層 227
第16章 倉頡UI案例：絕汁水果 229
16.1 資源導(dǎo)入 230
16.2 啟動頁結(jié)構(gòu) 231
16.2.1 橫幅數(shù)據(jù) 231
16.2.2 橫幅組件 231
16.2.3 進(jìn)入按鈕 233
16.2.4 組合 233
16.3 首頁 234
16.3.1 狀態(tài)變量 234
16.3.2 標(biāo)題欄 236
16.3.3 水果卡片 237
16.3.4 組合 240
16.4 詳情頁 240
16.4.1 狀態(tài)變量 241
16.4.2 添加至購物車函數(shù) 241
16.4.3 頁面結(jié)構(gòu) 242
16.4.4 組合 246
第17章 倉頡UI案例：暢游 247
17.1 資源導(dǎo)入 248
17.2 啟動頁結(jié)構(gòu) 249
17.2.1 背景層 249
17.2.2 文字層 250
17.2.3 動效層 252
17.2.4 組合 254
17.3 首頁 255
17.3.1 旅游產(chǎn)品數(shù)據(jù) 255
17.3.2 狀態(tài)變量 256
17.3.3 導(dǎo)航欄 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 狀態(tài)變量 262
17.4.2 背景層 262
17.4.3 導(dǎo)航欄 262
17.4.4 品名和價格區(qū) 263
17.4.5 預(yù)訂區(qū) 265
17.4.6 組合 268
第18章 倉頡UI案例：起司播客 270
18.1 資源導(dǎo)入 271
18.2 首頁結(jié)構(gòu) 272
18.2.1 導(dǎo)航欄 272
18.2.2 分類標(biāo)題 273
18.2.3 分類卡片列表 273
18.2.4 篩選欄 278
18.2.5 音樂列表 280
18.2.6 組合 284
18.3 頻道頁 285
18.3.1?播客作品數(shù)據(jù) 285
18.3.2 導(dǎo)航欄 286
18.3.3 播客個人信息區(qū)域 286
18.3.4 播客作品列表 287
18.3.5 組合 289
18.4 播放頁 290
18.4.1 狀態(tài)變量 290
18.4.2 導(dǎo)航欄 291
18.4.3 作品大圖 292
18.4.4 作品名和作者 292
18.4.5 播放控制按鈕 293
18.4.6 組合 294
第19章 倉頡UI案例：世界巡游團(tuán) 295
19.1 資源導(dǎo)入 296
19.2 啟動頁 297
19.2.1 封面組件 297
19.2.2 啟動按鈕組件 302
19.2.3 背景色 303
19.2.4 右側(cè)封面修正 303
19.2.5 組合 304
19.3 首頁 306
19.3.1 導(dǎo)航組件 306
19.3.2 口號文字組件 308
19.3.3 搜索條組件 309
19.3.4 篩選按鈕欄 311
19.3.5 推薦卡片列表組件 315
19.3.6 選項卡組件 331
19.3.7 首頁的調(diào)整優(yōu)化 335
19.4 詳情頁 338
19.4.1 導(dǎo)航欄 338
19.4.2 縮略圖列表 340
19.4.3 詳情卡片 342
19.4.4 組合 350
第20章 倉頡UI案例：生鮮配送網(wǎng) 353
20.1 資源導(dǎo)入 354
20.2 首頁結(jié)構(gòu) 355
20.3 導(dǎo)航 355
20.3.1 陰影層 356
20.3.2 菜單層 357
20.3.3 菜單陰影效果 357
20.3.4 菜單內(nèi)容 358
20.4 上半部分 362
20.4.1 背景圖片層 363
20.4.2 主題文字層 367
20.4.3 右側(cè)指示圖片層 371
20.4.4 組合 372
20.5 中間部分 379
20.6 下半部分 380
20.6.1 卡片結(jié)構(gòu) 380
20.6.2 卡片背景 381
20.6.3 卡片內(nèi)容 383
20.6.4 卡片列表 388
20.6.5 卡片列表容器背景 393
20.6.6 組合 394
20.7 下半屏預(yù)覽 395
第21章 倉頡UI案例：溢彩美妝網(wǎng) 397
21.1 資源導(dǎo)入 398
21.2 啟動頁結(jié)構(gòu) 399
21.3 背景層 399
21.3.1 漸變流動光影 399
21.3.2 圖形襯邊 401
21.3.3 組合 407
21.4 導(dǎo)航 410
21.4.1 大標(biāo)題 410
21.4.2 導(dǎo)航菜單 410
21.4.3 右側(cè)圖標(biāo)組 411
21.4.4 組合 412
21.5 主題文字區(qū) 414
21.5.1 小標(biāo)題 414
21.5.2 大標(biāo)題 415
21.5.3 副標(biāo)題 416
21.5.4 按鈕組 416
21.5.5 組合 417
21.6 圖片區(qū) 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