Function Builder

zonble
3 min readJul 20, 2019

--

感覺起來,Function Builder 應該是 Swift 5.2 才該有的新特性,可是呢,因為 SwiftUI 用到了 Function Builder,蘋果又大概打算在 WWDC 的時候就宣布 SwiftUI,所以即使還沒有做完,在 Swift 5.1 裡頭就加入了這個特性;目前用起來問題還不少就是了。

我們來簡單看一下 SwiftUI 的語法,來了解什麼是 Function Builder。像是我們想要建立一個簡單的 View,可能會這樣寫:

乍看之下我們好像可以看懂這邊在做什麼,就是在建立一個有兩個 Text 的 List,但仔細一看,這又是我們沒有看過的 Swift 語法:到底每個 code block 裡頭回傳了什麼?

在使用了 Function Builder 之後,其實 Swift compiler 會幫我們補完額外的語法,所以上面那段 code,其實會變成像是下面的程式:

在每一行會產生出物件的地方,Function Builder 會幫我們產生出變數,然後在最後一行用一個指定的 class/struct 的 static method,叫做 buildBlock,把這些產生出來的變數蒐集起來處理。在 ContentBuilder 與 View 這邊,雖然我們看不到 SwiftUI 的 source code,不過大概可以猜想是這樣:

buildBlock 這個 method 當中的參數可以是各種你想要的形態,也可以自行決定數量,端看你的需求而定。

Function Builder 這個語法最大的好處在於,在用了這個語法之後,在對應的 block 裡頭一行一行寫下來,就像是另外一種程式語言。Function Builder 是一套適合在 Swift 的基礎上發展自己的 DSL 的語法,而 SwiftUI 本身,我們就可以看成是一種用來描述 UI Layout 的 DSL。

前陣子跟幾個朋友在把玩 Function Builder,像 Ethan 就做了一個 NSAttributedStringBuilder ,根據說明文件,這個套件可以讓你用更清楚的語法,組合 NSAttributedString,像你原本要寫成:

現在可以用類似 Swift UI 的方法組合

我自己也寫了一個好玩的東西。話說我隱約記得,小時候開始學電腦,學過一個叫做 Logo 的語言,在這個語言裡頭,可以用程式叫一隻小烏龜畫圖,方法是叫他左右旋轉,然後向前畫線,所以我做了一個套件在 Swift 裡頭做這件事情,這個套件是 TurtleBuilder

我們來看一下 Wikipedia 上面講 Logo Language 這條,裡頭有一個當年 IBM LCSI Logo 的範例程式碼

REPEAT 就是跑回圈,FD 是往前移動,接的參數是距離,RT 是右轉,接的參數是角度。

用 TurtleBuilder,在 Swift 裡頭寫成下面這樣的程式 — 對了,因為這年頭螢幕解析度比較高,所以我們把畫圖的距離加大了一點:

就可以在 iPhone 裡頭這樣畫圖了:

--

--

zonble
zonble

Written by zonble

XDDDD - eXtreme Due Date Driven Development

No responses yet