View 和調整器（modifier）介紹 - SwiftUI 新手入門

Hello 大家好 歡迎來到 ChaoCode 我是 Jane 上一集我們介紹了 SwiftUI 的架構 是從 App 到 Scene 然後再到 View 我們這一集就要來好好地介紹這個 View 不過在介紹之前呢 我想要再小小地補充一下 Scene 的內容 我們現在的這個 FoodPicker 用的是 WindowGroup 基本上大部分時候

你都會是用這一個 Scene 不過還是有另外兩個 Scene 我覺得你可以先認識一下 一個是 DocumentGroup 基本上它就跟 WindowGroup 一樣 只是它多了這個文件的特性 當你再做一個會生出一個檔案的 APP 的時候 你通常會用這個 因為這個會自動帶給你 儲存、開新檔案、開啟舊檔、復原上一步、下一步

這些文件的基本功能 而且這個一樣是在 mac 和 iOS 上都有 然後另外一個是Settings 這個是只有在 mac 上有的 就是我們平常在 mac 的 App 裡面 從工具列上選 Preference 的時候 會跳出來的那個設定視窗 通常你在做 mac 的 app 時候 除了主要的 Scene

你也會設定這個設定的 Scene 好，我們現在來講這一集的重點～就是這個 View Protocol 還記得我們上一集的介紹嗎？

有遵循這個 Protocol 的類型 就可以被顯示在畫面上 它的設計要求就是必須要在 body 屬性中 描述這個畫面長得是什麼樣子 而這個 body 的類型 也是某一種 View 這邊是不是有一點奇怪 一個 View 的類型要實作 也需要一個 View 類型的屬性 那這樣子不是一個無止盡的循環嗎？

我們到底要怎麼做出一個 View？

這裡其實不用擔心 從無到有地宣告一個 View 實際上我們只會用 SwiftUI 內建提供給我們的 View 來設計 像是我們一打開專案的這個畫面 這一個 ContentView 裡面用到這些 VStack、Image、Text 其實就是內建的已經遵循 View 的類型 我們基本上就會說 它是一個 View

所以在這裡我們就是用 三個 SwiftUI 提供給我們的 View 建立了一個叫做 ContentView 的 View 這個就像是料理 比方說珍珠奶茶是一個食物 但它的原料們也是食物 就是 珍珠、牛奶、糖跟紅茶 如果這是一個料理的 framework 就會是內建這四個食物

我們可以自己再搭配組成新的食物 像是牛奶加紅茶就會變成奶茶 然後也可以再加珍珠就變成珍奶 如果再加更多糖就變成台南珍奶 這些東西 這每一個組合 組合前、組合後都一樣是食物 所以在這裡 我要可以做出一個食物 我會需要的能力是 第一個

我要知道有哪些食材可以使用 然後第二個 我要知道有哪些料理方式 比方說 我有沒有可以加熱的工具 或者我有沒有辦法調整甜度、調整冰塊 那再來就是要知道我要怎麼樣組合 組合的順序是什麼 我應該要先放珍珠還是要先放糖 這些東西應該要 放在一起還是要各別放在獨立的盤子裡面

這幾個概念我們再把它轉回 View 會是一模一樣的 我如果要做出一個 View 呢 我需要的能力就是 第一，我要知道有哪些 View 可以用 第二，我要知道 View 可以做什麼變化 在 View 的變化就像是文字要有多大 顏色要用什麼 然後第三就是 怎麼組合跟排序 像是一個畫面上可能有很多個按鈕

或者是很多的文字 它們應該要上下排列還是左右排列 這幾個東西分別也有名詞 第一個 就是我們現在已經認識的 View 第二個叫做 modifier 中文我們叫它調整器 然後第三個就是 Layout 排版 我們一開始 最初的這個預設畫面 就用到這三個東西了哦 View 就是剛剛講的這三個

然後在這每一個 View 後面加的方法都是調整器 像這個就是把圖片放更大 然後還有把前景顏色換成強調色 最後下面這邊還有一個 Padding 這個指的就是邊距 也就是在這個 View 的四周 我想要留一些空白的意思 然後第三個 Layout 其實這個 VStack 它除了是一個 View

它也是一種 Layout 它的意思就是 Vertical Stack 也就是垂直排列的一個空間 所以我們是把這兩個 View 放在這個垂直排列的空間裡面 我們最後看到畫面才會看到是 圖片在上面 然後 Hello Baby 在下面 好，希望現在你對 View 的組成大概有一些概念 我們現在回到 XCode 來看看

到底有哪些 View 和調整器可以使用 那我們一開始想要建立自己的 View 的時候 我們要怎麼樣知道 到底有哪些 View 和調整器可以用呢？

很簡單 我們一開始可以透過右上角這個加號來看 這邊點進來呢會有幾個 Tab 第一個 Tab 裡面的就是 View 然後這些 View 也有被分類 像一開始是一些跟控制有關的 View 所以就像是按鈕、顏色選擇、選日期這些 基本上你大概看一下前面的 icon 你就會知道是什麼

然後旁邊也會有一個簡單的 Summary 介紹 那你也可以在這邊點下打開 連到文件上去看更詳細的介紹 那如果你的 App 是有支援多個版本的時候 你在使用的時候就要注意一下這邊 它會寫這個 View 最低要哪一個版本才能支援 那再回到這邊 我們除了按右上角加號

我們也可以按 Command + Shift + L 這個畫面也可以出來 我們這裡再繼續往下拉 可以看到有很多的 View 然後接下來黃色這邊是 Layout 也就是排版 這個排版也是 View 的一種 因為雖然它是負責把不同的 View 排列組合起來 但是這些東西組合完之後一樣是變成一個 View

然後再來這個 Paint 就是一些漸層 然後剩下的就是一些形狀、顏色、分隔線等等的 基本上這裡就是很方便你 在你還不熟到底有哪些 View 的時候在這邊尋找 你也可以按右上角這個 Button 這邊點下來 這個選單就會變成用圖示排列 有的時候可能用圖示來找會比較直覺 然後接下來

第二個 Tab 就是 modifier 也就是剛剛說的 料理方式 也就是我們可以對 View 做的調整 這邊就有非常多的東西 它的分類從一開始 有一些跟控制相關的 然後一些特效 然後再來 也有一些跟 Layout 有關的 這跟剛剛的不一樣哦 剛剛的是產生一個排版畫面

那現在這個是在描述要怎麼樣排版 比方說我想要怎麼樣對齊 我的邊距、每一個東西之間的距離應該要是多少 然後再來… 還有跟文字相關的調整 就像是字型或是字體大小 或是字間的距離 然後這邊還有跟圖片相關的調整 這個真的太多太多了 然後還有跟 List

就是清單相關的調整 這邊我先直接把它用成 icon 模式 這樣我會比較好看到所有東西 後面還有這個跟導覽有關的 跟風格有關的 還有跟 Accessibility 就是輔助模式 輔助模式指的就像是有視覺障礙的人 他們可能會需要用旁白朗讀來理解畫面上的資訊

那這個旁白要說什麼 我們就是透過 Accessibility 裡面的一些 modifier 來設定 然後後面還有一些事件 手勢還有形狀 還有一些其他的有的沒的 這個 modifier 的內容就是真的非常多 你不需要刻意去記 用久了其實你就會自然地把常用的記起來 那後面這四個 Tab 我也一起講一下

接下來這個是 Code Snippets 就是你可以自己設定一些快速生成的 code 前面這些是我自己設定的 但其實你一打開來就已經會有很多 Swift 預設就有的 比方說大家應該都會 很熟悉的 if 當我們輸入 if 的時候 Swift 就會自動跳出這個 幫助你完成的一段 code 然後裡面有一些 placeholder 讓你很方便地改變

這些東西就是在這個 Code Snippets 裡面 然後再來就是圖片 如果我們有在這個 Assets 裡面 放任何圖片的話 它就會出現在這裡 然後還有顏色也是一樣 我們上一次在介紹 Assets 的時候 有說這裡面也會有顏色 雖然我們現在還沒有設定任何的顏色 但是每一個 App 都是有強調色的 如果你沒有去設定它的話 預設就是這個藍色

然後最後這個是這一版新的東西 這個裡面有很多的 icon 是 Apple 提供給我們使用的 你可以直接在這裡搜尋 比方說我搜尋個 月亮 這裡就會出現很多跟月亮相關的 icon 那這個 icon 在使用的時候也要注意 它也是有版本限制的 像是這個就是至少要 iOS15 才能夠顯示

所以在用新的 icon 的時候要特別注意這一點 好 那這些就是先簡單介紹 View 和 modifier 的概念 我們接下來就要開始實作了 因為實作部分比較長 我就分到下一個影片 希望你可以接著繼續看下去 那我們就下個影片再見囉～掰掰～