面向全部人的 UI 編程 ：透過點按彈窗初嘗 SwiftUI

「試想你是一名美術，徹底不瞭解程序。而你眼前只有一位盲人程序員，你想讓他幫你實現這個程序，你會怎樣告訴你的程序員你想要的效果？」

本文是 SwiftUI 開發教程中的一篇，咱們將一塊兒探究上述問題的答案。若你有興趣學習 iOS 應用程序開發，又或者是想了解 iOS 程序是如何運行的，歡迎關注這一系列文章。我會頻繁更新關於 iOS 程序開發的各類知識點和技巧。本系列所有文章少數派的王禹效帳戶下免費分享，源碼購買見文末。

什麼是點按彈窗？

在更新 iOS 13 或者 iPadOS 13 後，你會發現長按許多軟件圖標都會出現以下彈窗，好比設置內的快捷選項容許你快速更改電池設置等等。點按彈窗的體驗並無止步於此，使用過新系統一段時間後，你會發現這個點按彈窗滲透到了系統應用的方方面面。事實上，蘋果在今年 WWDC 19 開發者大會中，推薦開發者將應用內彈窗安置在應用程序的方方面面，以保證 iOS 用戶體驗的一致性。

iOS 13 中的點按彈窗

在開始寫點按彈窗以前，咱們須要簡單瞭解什麼是 SwiftUI。簡單來講，任何你在手機上看到的程序界面都叫 UI，也就是交互界面。在手機應用中，軟件開發者會使用不一樣的技術來實現界面的顯示，流行的界面語言好比 Flutter，就是閒魚應用的交互界面語言。而對於蘋果的設備，好比 Apple Watch，Mac，iPhone 或是 iPad，蘋果在 2019 年推出的官方 UI 編程語言則是 SwiftUI。SwiftUI 集衆家之長，具備諸多優秀特性，能夠預見它將會出如今諸多應用程序中。若你有興趣，我會在其它文章中詳解 SwiftUI，本文只着重講其中彈窗的寫法與邏輯。

你會怎樣描述一個程序？

本文我將用以下圖中的一個例子來展現如何設置點按彈窗。下圖中程序的功能很簡單：長按這句名言後，會出現點按彈窗，你能夠點擊複製按鈕將這句話複製到系統剪貼板中。

試想你是一名美術，徹底不瞭解程序。而你眼前只有一位盲人程序員，你想讓他幫你實現這個程序，你會怎樣告訴你的程序員你想要的效果？

也許你會這樣和他說：

我這個程序上有一段名人名言，中英文版，上面一行是「天助自助者」，下面是「God helps those who help themselves」我但願它能被點按選中，選中的時候必定注意中英文兩句話要一塊兒被選中，並且上下左右請留出邊距；對了，選中後要彈出一個選項，左邊是複製，右邊是一個複製的圖標；啊，對了對了，英語字體最好是圓體字，並且兩段文字都要加粗，就是小標題加粗的那種感受。

那麼爲何我要說這些呢？由於 SwiftUI 的設計思路正是描述性編程語言，你將上面這段話稍微整理一下，就是 SiwftUI 的寫法。好比下面這段文字就是我整理好的 SwiftUI 代碼：

開個玩笑，咱們還缺一步，把這段文字翻譯成 SwiftUI 的寫法就好了。

透過 SwiftUI 語法瞭解如何設置點按彈窗

這個功能的所有實現代碼以下，我會在下文中逐步講解每一段代碼的用途。

SwiftUI

SwiftUI 由兩類代碼組成，分別是 View 和 Modifier。以下圖所示，這兩類代碼均可以在 Xcode 中直接拖出來用，你要作的只是玩拼圖把它們拼在一塊兒拼出你想要的功能。其中 View 表示一個視圖，好比咱們在手機上看到的一個滑條，一張圖片，一個列表等種種，都叫作視圖；而 Modifier 則是修飾器，它的做用是爲視圖增長功能，好比圓角，動畫，陰影，邊際，背景等等。下圖就是它們在 Xcode 中的預設。

Xcode Library

寫 SwiftUI 得過程，實際上就是將一個個最基本的 View 像滾雪球同樣越包越大的過程，你把一個個基礎的視圖和修改器用一個更大的視圖包在一塊兒，用修改器修改更大的視圖，就能實現複雜的功能。如今咱們來觀察上述代碼的結構，你會發現整段代碼由一個名叫 VStack 的視圖和衆多 Modifier 組成。

the Big Picture

那麼 VStack 是什麼呢？它的裏面爲何會包着兩個 Text 呢？其實 VStack 和 Text 本質上都被歸爲 View 這一類，VStack 的做用是將兩段文字包在一塊兒以便於被總體選中。然後面的所有代碼都是這個 VStack 視圖的修飾器，爲其添加顏色，邊距，以及點按彈窗功能。其中，上圖的例子裏的 View 又包含了兩個更小的 Text View，每一個 Text View 又被 .font 的字體修改器修改。

說了那麼多你可能已經暈了，那麼咱們來對比看看第一段，仔細觀察下面這張圖。發現了嗎？縱向排列的 View 在 SwiftUI 裏叫作 VStack，它用一個花括號 {包住裏面的內容}；而文字的 View 在 SwiftUI 裏叫作 Text。中文裏圓括號中的各類要求，正是 SwiftUI 裏的各類修改器，語法結構是 「.修改器的名字」。好比下圖中咱們想修改成小標題的字體，就寫 .font(.headline)。

是時候攻克更多的內容了，咱們來看看下面這段代碼，我先不說你看看。對了，正是這樣，這段代碼中包含三個針對 VStack 的修改器，分別是正文設置爲白色 .foregroundColor(Color.white)，四周加邊距 .padding()，和顯示點按菜單.contextMenu()。

終於聊到了點按菜單的實現方式了，點按菜單是什麼呢？它的實質就是一個 View，和其它任何 View 並沒有二致，所以咱們須要在 contextMenu 裏放一個 View 便可。而點按菜單，顧名思義，就是一個按鈕，那麼咱們設置一個 Button View。在按鈕中，咱們須要設置兩個點：按鈕的動做，也就是 action，裏面的兩行代碼會將名言文字複製到剪貼板；另外一個點是下面的 HStack ，表示一個水平排列的 View。其左邊是一個文字，右邊是一個圖標。這裏關於 Button 的解釋若你不熟悉編程可能會有點暈，不要緊，我會在其它文章詳細講解。

在上圖中，你會發現背景變成藍色的了，爲何？由於我寫文章的時候已是晚上了，手機自動切換到了夜間模式，咱們的應用程序也完成了自動切換。這是如何作到的呢？我會在其它文章中詳細講解。

擴展閱讀

我以前寫過部分關於程序開發的文章，若你有興趣能夠去看看，它們的內容依舊很新值得參考。

難度-低：應用程序開發：使用蘋果官方模版製做應用圖標 - Sketch + Xcode

難度-低：善用學習資源，你也能夠成爲 iOS 獨立開發者

難度-中：Swift: 巧用開源，查看原始代碼

寫在文後

若你耐着性子讀完本文，你可能會發現我用來展現的代碼多了個徹底沒用的 HStack，你可能會發現我沒講那個複製圖標是哪來的，你可能會好奇這麼多代碼如何整理成更易讀的小塊。若是你是老手，你可能會好奇 contextMenu 如何用在 UIKit 上；若是你對編程零基礎，你可能會發現用 SwiftUI 寫程序界面和簡單功能其實沒那麼難，無非就是對大白話的翻譯。

若你想仔細的學習 SwiftUI 和蘋果或安卓應用程序開發，歡迎在文末寫下你想學習的內容，我會參考寫文。若你由於文中的長代碼而感到懼怕，以爲程序員都是天才，腦子超好用能將這些代碼一次性全寫出來，不是這樣的。好比上面代碼中的例子，一開始你只有一個簡單的思路，我要一句名言，能點按複製就行。因而乎你放下了一個文字的 View，寫出來了以爲很差看，扔各類修飾器上去加顏色改字體加圖標種種，雪球越滾越大你的程序也越加好看和擁有越多功能。SwiftUI 是一個全新的 UI 語言，別怕，在這裏咱們都是新手。

「試想你是一名美術，徹底不瞭解程序。而你眼前只有一位盲人程序員，你想讓他幫你實現這個程序，你會怎樣告訴你的程序員你想要的效果？」

你會說，嗨，這麼簡單的事，用 SwiftUI 美術我本身就能寫。

下集預告

好奇程序中的動畫是如何實現的嗎？在下一期中，我將教你用幾行代碼搞定一個 3D 翻卡牌的動畫。咱們會在這一期中一塊兒學習 SwiftUI 中的狀態控制，以及瞭解更多的修飾器。

源代碼

本 iOS + SwiftUI 系列教程的全部源代碼在個人「店」中有銷售，一次購買，一直更新。若你在海外，能夠在個人主頁上用海外信用卡, Apple Pay 或 Paypal 購買。文章我會不斷更新，如今購買價格是最優惠的，本系列所有源碼價格每十篇文章我會上調一次。我會在 2020 年 1 月前爲本系列更新至少 30 篇文章，謝謝你們支持！

國內：王禹效 iOS + SwiftUI 開發教程所有源碼 

海外：王禹效的主頁