SwiftUI自學(xué)成長(zhǎng)筆記

目錄

第1章 我的第一個(gè)iOS應(yīng)用程序\t1
1．1 使用Xcode快速創(chuàng)建項(xiàng)目\t1
1．1．1 為項(xiàng)目添加程序圖標(biāo)和相關(guān)圖片素材\t3
1．1．2 為項(xiàng)目添加預(yù)定義顏色\t5
1．1．3 為項(xiàng)目添加圖片素材\t7
1．2 創(chuàng)建啟動(dòng)畫面\t9
1．3 創(chuàng)建卡片視圖布局\t10
1．3．1 創(chuàng)建CardView\t10
1．3．2 創(chuàng)建線性漸變色背景\t14
1．3．3 為CardView添加圖像和文本\t15
1．3．4 為CardView添加按鈕\t17
1．4 循環(huán)生成多張卡片視圖\t21
1．5 為卡片創(chuàng)建數(shù)據(jù)模型\t22
1．5．1 創(chuàng)建卡片數(shù)據(jù)模型\t23
1．5．2 為靜態(tài)數(shù)據(jù)創(chuàng)建數(shù)組\t24
1．5．3 在卡片中顯示數(shù)據(jù)信息\t24
1．6 在應(yīng)用程序中播放聲音\t28
1．7 創(chuàng)建動(dòng)畫效果\t29
1．7．1 為卡片人物創(chuàng)建淡入動(dòng)畫\t29
1．7．2 為標(biāo)題創(chuàng)建下滑入動(dòng)畫效果\t31
1．7．3 為按鈕創(chuàng)建上滑入動(dòng)畫效果\t31
1．8 為應(yīng)用程序添加觸控反饋效果\t33
1．9 呈現(xiàn)警告對(duì)話框\t34
1．10 為應(yīng)用程序創(chuàng)建iMessage貼圖\t36
第2章 這里是北京\t40
2．1 使用Xcode創(chuàng)建項(xiàng)目\t40
2．1．1 為項(xiàng)目添加程序圖標(biāo)和相關(guān)圖片素材\t41
2．1．2 為項(xiàng)目添加適配顏色集和圖像集\t42
2．2 創(chuàng)建支持淺色和深色模式的啟動(dòng)畫面\t46
2．2．1 創(chuàng)建Launch Screen故事板\t46
2．2．2 設(shè)計(jì)Launch Screen用戶界面\t48
2．2．3 在項(xiàng)目中設(shè)置啟動(dòng)畫面\t51
2．3 創(chuàng)建Tab View導(dǎo)航\t52
2．3．1 創(chuàng)建4個(gè)場(chǎng)景視圖\t53
2．3．2 創(chuàng)建Tab View\t54
2．4 創(chuàng)建北京簡(jiǎn)介視圖\t55
2．4．1 創(chuàng)建簡(jiǎn)介視圖\t55
2．4．2 為簡(jiǎn)介視圖添加動(dòng)畫效果\t58
2．5 創(chuàng)建小吃視圖頁面\t59
2．5．1 設(shè)計(jì)橫幅視圖布局\t59
2．5．2 創(chuàng)建橫幅滾動(dòng)視圖\t62
2．5．3 獲取HeaderView所需的靜態(tài)數(shù)據(jù)\t63
2．5．4 創(chuàng)建靈活的表格式布局\t65
2．5．5 創(chuàng)建橫幅滾動(dòng)視圖\t71
2．5．6 創(chuàng)建特色小吃店卡片視圖\t75
2．5．7 創(chuàng)建小吃店詳細(xì)頁面視圖\t82
2．5．8 使用Sheet修飾器呈現(xiàn)新的視圖\t87
2．6 創(chuàng)建胡同視圖頁面\t89
2．7 使用SwiftUI設(shè)計(jì)表單\t95
第3章 蔬菜百科全書\t100
3．1 使用Xcode快速創(chuàng)建項(xiàng)目\t100
3．1．1 設(shè)置iOS設(shè)備的屏幕允許方向\t101
3．1．2 為項(xiàng)目添加程序圖標(biāo)和蔬菜圖片\t102
3．1．3 為項(xiàng)目添加顏色集\t104
3．1．4 在模擬器中查看效果\t106
3．2 利用Page Tab View創(chuàng)建引導(dǎo)畫面\t106
3．2．1 整理項(xiàng)目文件的結(jié)構(gòu)\t107
3．2．2 創(chuàng)建可復(fù)用的蔬菜卡片視圖\t107
3．2．3 創(chuàng)建自定義外觀按鈕\t111
3．2．4 為蔬菜卡片增加動(dòng)畫效果\t113
3．2．5 創(chuàng)建蔬菜卡片分頁視圖\t114
3．3 創(chuàng)建數(shù)據(jù)模型和獲取數(shù)據(jù)\t116
3．3．1 創(chuàng)建數(shù)據(jù)模型\t116
3．3．2 創(chuàng)建蔬菜數(shù)據(jù)\t117
3．3．3 在蔬菜卡片中顯示蔬菜數(shù)據(jù)\t117
3．3．4 在引導(dǎo)頁面中顯示蔬菜數(shù)據(jù)\t119
3．4 使用AppStorage封裝器存儲(chǔ)數(shù)據(jù)\t120
3．4．1 SwiftUI中應(yīng)用程序的生存期\t121
3．4．2 完成按鈕的執(zhí)行代碼\t124
3．5 通過循環(huán)創(chuàng)建列表視圖\t125
3．5．1 創(chuàng)建行視圖\t125
3．5．2 創(chuàng)建列表視圖\t128
3．5．3 設(shè)置導(dǎo)航視圖的屬性\t130
3．6 創(chuàng)建蔬菜的詳情視圖\t130
3．6．1 創(chuàng)建視圖文件\t130
3．6．2 添加導(dǎo)航鏈接\t131
3．6．3 設(shè)計(jì)詳情頁面視圖\t132
3．6．4 創(chuàng)建獨(dú)立的蔬菜圖片視圖\t135
3．6．5 在詳情頁面中調(diào)用蔬菜圖片視圖\t137
3．6．6 創(chuàng)建鏈接視圖\t139
3．6．7 創(chuàng)建蔬菜分類視圖\t141
3．6．8 Disclosure Group的使用\t141
3．7 創(chuàng)建App的設(shè)置頁面\t144
3．7．1 創(chuàng)建SettingsView\t145
3．7．2 為設(shè)置視圖添加關(guān)閉功能\t146
3．7．3 為列表視圖添加開啟設(shè)置頁面功能\t147
3．7．4 完善設(shè)置頁面的第一部分功能\t148
3．7．5 實(shí)現(xiàn)設(shè)置頁面的第三部分功能\t150
3．7．6 實(shí)現(xiàn)設(shè)置頁面的第二部分功能\t154
第4章 名勝古跡App\t158
4．1 使用Xcode創(chuàng)建名勝古跡項(xiàng)目\t158
4．1．1 添加圖片和視頻素材\t159
4．1．2 添加JSON格式的數(shù)據(jù)文件\t161
4．1．3 設(shè)置程序的啟動(dòng)畫面\t162
4．1．4 創(chuàng)建TabView\t163
4．2 解析JSON格式文件并獲取相應(yīng)數(shù)據(jù)\t165
4．2．1 橫幅封面視圖\t165
4．2．2 JSON相關(guān)知識(shí)\t166
4．2．3 解析JSON數(shù)據(jù)\t168
4．2．4 使用JSON數(shù)據(jù)生成封面圖片\t170
4．3 利用Swift范式創(chuàng)建SwiftUI列表\t172
4．3．1 設(shè)計(jì)瀏覽頁面列表視圖的行布局\t172
4．3．2 創(chuàng)建數(shù)據(jù)模型\t174
4．3．3 Swift的范式\t174
4．3．4 實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)行信息的設(shè)置\t175
4．4 創(chuàng)建名勝古跡的詳細(xì)視圖\t177
4．4．1 初步創(chuàng)建詳細(xì)視圖\t178
4．4．2 設(shè)計(jì)橫幅圖片、標(biāo)題和提要\t180
4．4．3 創(chuàng)建可復(fù)用的Heading視圖\t181
4．4．4 創(chuàng)建畫冊(cè)視圖\t183
4．4．5 使用NavigationLink創(chuàng)建鏈接\t185
4．4．6 創(chuàng)建相關(guān)信息視圖\t186
4．4．7 創(chuàng)建地圖視圖\t188
4．4．8 創(chuàng)建鏈接組件\t192
4．5 創(chuàng)建視頻播放視圖\t194
4．5．1 創(chuàng)建數(shù)據(jù)模型和行視圖\t194
4．5．2 生成列表視圖\t197
4．5．3 觸控反饋\t200
4．5．4 創(chuàng)建視頻播放頁面\t201
4．5．5 視頻播放頁面的附加設(shè)置\t204
4．5．6 為視頻瀏覽頁面添加鏈接\t206
4．6 創(chuàng)建帶有標(biāo)注的復(fù)雜地圖\t207
4．6．1 創(chuàng)建數(shù)據(jù)模型\t207
4．6．2 創(chuàng)建復(fù)雜地圖\t207
4．6．3 自定義標(biāo)注\t210
4．6．4 為視圖添加細(xì)節(jié)素材\t213
4．7 創(chuàng)建運(yùn)動(dòng)動(dòng)畫\t216
4．8 創(chuàng)建照片視圖\t222
4．8．1 創(chuàng)建基本的網(wǎng)格視圖\t222
4．8．2 實(shí)現(xiàn)照片視圖的基本功能\t225
4．8．3 實(shí)現(xiàn)照片視圖的滑動(dòng)條功能\t226
4．8．4 對(duì)網(wǎng)格視圖的改進(jìn)\t228
4．9 創(chuàng)建復(fù)雜的網(wǎng)格視圖布局\t229
4．9．1 工具欄的設(shè)置\t230
4．9．2 利用Group實(shí)現(xiàn)模式切換\t231
4．9．3 實(shí)現(xiàn)網(wǎng)格視圖的基本功能\t233
4．9．4 實(shí)現(xiàn)網(wǎng)格視圖的列數(shù)動(dòng)態(tài)變換效果\t235
4．10 創(chuàng)建iMessage擴(kuò)展功能\t238
4．11 將應(yīng)用程序適配到iPadOS和macOS平臺(tái)\t241
4．11．1 創(chuàng)建App的關(guān)于面板\t241
4．11．2 自定義修飾器\t242
4．11．3 將項(xiàng)目遷移到macOS平臺(tái)\t244
第5章 愛上寫字\t247
5．1 使用Xcode創(chuàng)建項(xiàng)目\t247
5．1．1 為項(xiàng)目添加程序圖標(biāo)和相關(guān)圖片素材\t248
5．1．2 為項(xiàng)目添加啟動(dòng)畫面\t249
5．1．3 整理項(xiàng)目文件架構(gòu)\t250
5．1．4 創(chuàng)建FooterView\t251
5．1．5 快速輸入自定義代碼塊\t253
5．2 創(chuàng)建自定義導(dǎo)航欄\t254
5．2．1 創(chuàng)建導(dǎo)航欄視圖\t255
5．2．2 設(shè)計(jì)導(dǎo)航欄中的Logo視圖\t256
5．2．3 為主場(chǎng)景視圖添加導(dǎo)航欄\t257
5．3 創(chuàng)建圖像滑動(dòng)視圖\t260
5．3．1 創(chuàng)建數(shù)據(jù)模型\t260
5．3．2 創(chuàng)建JSON解析方法\t261
5．3．3 創(chuàng)建用于滑動(dòng)的圖像視圖\t261
5．3．4 將圖像滑動(dòng)視圖添加到主場(chǎng)景視圖\t263
5．4 為文具分類創(chuàng)建網(wǎng)格布局視圖\t264
5．4．1 創(chuàng)建文具分類數(shù)據(jù)模型\t264
5．4．2 創(chuàng)建文具分類子視圖\t265
5．4．3 創(chuàng)建文具分類網(wǎng)格視圖\t267
5．4．4 為網(wǎng)格視圖創(chuàng)建Header和Footer視圖\t268
5．5 為商品創(chuàng)建網(wǎng)格布局視圖\t270
5．5．1 創(chuàng)建可復(fù)用的標(biāo)題組件\t270
5．5．2 創(chuàng)建商品的數(shù)據(jù)模型\t272
5．5．3 創(chuàng)建商品子視圖\t272
5．5．4 創(chuàng)建商品網(wǎng)格視圖\t274
5．6 創(chuàng)建品牌網(wǎng)格布局視圖\t275
5．6．1 創(chuàng)建品牌的數(shù)據(jù)模型\t275
5．6．2 創(chuàng)建品牌子視圖\t276
5．6．3 創(chuàng)建品牌網(wǎng)格視圖\t277
5．7 創(chuàng)建商品詳細(xì)頁面視圖\t278
5．7．1 創(chuàng)建產(chǎn)品詳細(xì)頁面視圖\t278
5．7．2 創(chuàng)建詳細(xì)頁面導(dǎo)航欄\t279
5．7．3 創(chuàng)建Header視圖\t280
5．7．4 創(chuàng)建詳細(xì)頁面的上半部分視圖\t281
5．7．5 創(chuàng)建詳細(xì)頁面的商品描述視圖\t283
5．7．6 創(chuàng)建自定義形狀\t284
5．7．7 創(chuàng)建評(píng)星和筆尖規(guī)格視圖\t287
5．7．8 創(chuàng)建數(shù)量和“設(shè)為最愛”視圖\t290
5．7．9 創(chuàng)建添加到購(gòu)物車視圖\t291
5．8 完成最后的設(shè)置\t293
5．8．1 創(chuàng)建Shop類\t293
5．8．2 在ContentView類中添加Shop實(shí)例\t294
5．8．3 實(shí)現(xiàn)返回按鈕的功能\t295
5．8．4 完善詳細(xì)頁面視圖功能\t297
5．8．5 添加觸控反饋特性\t299
第6章 奇妙水果機(jī)\t302
6．1 使用Xcode創(chuàng)建項(xiàng)目\t302
6．1．1 為項(xiàng)目添加程序圖標(biāo)和相關(guān)圖片素材\t303
6．1．2 為項(xiàng)目添加啟動(dòng)畫面\t304
6．2 創(chuàng)建Header視圖\t305
6．2．1 創(chuàng)建場(chǎng)景頁面代碼架構(gòu)\t305
6．2．2 單獨(dú)創(chuàng)建Logo視圖\t307
6．2．3 添加重置和相關(guān)信息按鈕\t308
6．2．4 創(chuàng)建記分牌視圖\t310
6．3 創(chuàng)建游戲主界面\t314
6．3．1 設(shè)計(jì)水果機(jī)的槽位視圖\t314
6．3．2 搭建游戲主界面視圖\t316
6．4 添加Footer視圖\t318
6．4．1 創(chuàng)建Footer界面\t318
6．4．2 重構(gòu)Footer視圖的代碼\t320
6．5 創(chuàng)建游戲信息視圖頁面\t323
6．5．1 創(chuàng)建信息視圖\t323
6．5．2 實(shí)現(xiàn)關(guān)閉信息頁面功能\t327
6．6 編寫游戲邏輯代碼\t329
6．6．1 實(shí)現(xiàn)隨機(jī)生成槽位水果的邏輯\t329
6．6．2 實(shí)現(xiàn)判斷輸贏的邏輯\t331
6．6．3 實(shí)現(xiàn)玩家選擇游戲分值的功能\t333
6．6．4 創(chuàng)建游戲結(jié)束時(shí)的自定義窗口\t335
6．7 利用User Defaults存儲(chǔ)和獲取數(shù)據(jù)\t341
6．8 為游戲添加動(dòng)畫效果\t342
6．9 為游戲添加聲效和背景音樂\t346
第7章 TODO應(yīng)用程序\t350
7．1 使用Xcode創(chuàng)建項(xiàng)目\t350
7．1．1 創(chuàng)建Todo項(xiàng)目\t350
7．1．2 創(chuàng)建添加待辦事項(xiàng)視圖頁面\t353
7．2 了解Core Data特性\t357
7．2．1 Core Data簡(jiǎn)介\t357
7．2．2 為項(xiàng)目創(chuàng)建實(shí)例\t358
7．2．3 Core Date的工作方式\t359
7．2．4 為頁面添加managedObjectContext\t361
7．2．5 改善AddTodoView的用戶體驗(yàn)\t364
7．2．6 顯示待辦事項(xiàng)數(shù)據(jù)信息\t365
7．2．7 刪除和更新數(shù)據(jù)記錄\t367
7．3 顯示隨機(jī)視圖\t369
7．3．1 創(chuàng)建EmptyListView頁面\t369
7．3．2 為視圖添加微動(dòng)畫\t373
7．3．3 顯示隨機(jī)內(nèi)容\t374
7．4 改進(jìn)表單的外觀\t375
7．4．1 改進(jìn)AddTodoView的外觀\t375
7．4．2 改進(jìn)ContentView的外觀\t377
7．5 創(chuàng)建設(shè)置視圖頁面\t381
7．5．1 創(chuàng)建設(shè)置視圖頁面\t381
7．5．2 創(chuàng)建表單靜態(tài)行視圖\t382
7．5．3 創(chuàng)建可鏈接的靜態(tài)行視圖\t384
7．6 創(chuàng)建可切換應(yīng)用程序圖標(biāo)功能\t388
7．6．1 添加并設(shè)置可替換圖標(biāo)\t388
7．6．2 從配置文件中獲取可替換圖標(biāo)信息\t391
7．6．3 生成應(yīng)用程序圖標(biāo)選擇器\t393
7．7 為應(yīng)用程序創(chuàng)建顏色主題\t398
7．7．1 創(chuàng)建顏色主題相關(guān)文件和文件夾\t398
7．7．2 在SettingsView頁面中添加切換顏色主題功能\t399
7．7．3 更新用戶界面\t402
7．7．4 完成設(shè)計(jì)上的最后改進(jìn)\t404
第8章 InYourHeart應(yīng)用程序\t406
8．1 使用Xcode創(chuàng)建項(xiàng)目\t406
8．2 創(chuàng)建卡片視圖\t409
8．2．1 創(chuàng)建卡片視圖的數(shù)據(jù)模型\t409
8．2．2 創(chuàng)建卡片視圖\t410
8．3 創(chuàng)建Header和Footer視圖\t413
8．3．1 創(chuàng)建HeaderView頁面\t413
8．3．2 創(chuàng)建Footer視圖頁面\t415
8．4 創(chuàng)建可復(fù)用組件\t416
8．5 創(chuàng)建指南視圖頁面\t419
8．6 利用Binding實(shí)現(xiàn)視圖之間的數(shù)據(jù)交換\t421
8．6．1 Binding封裝屬性\t422
8．6．2 使用環(huán)境對(duì)象關(guān)閉視圖\t424
8．6．3 生成信息導(dǎo)覽頁面視圖\t426
8．6．4 實(shí)現(xiàn)InfoView的呈現(xiàn)和關(guān)閉\t432
8．7 創(chuàng)建照片卡牌\t434
8．7．1 創(chuàng)建照片卡牌\t434
8．7．2 對(duì)照片卡牌的改進(jìn)\t436
8．7．3 實(shí)現(xiàn)左右滑動(dòng)手勢(shì)\t437
8．7．4 顯示喜愛或不喜愛的圖標(biāo)\t442
8．8 移除和添加照片卡牌\t444