付費限定

💻學習 SwiftUI:為什麼從畫 Mac 開始?

更新 發佈閱讀 4 分鐘

我最近在教新手 SwiftUI 排版時,會用一個特別的教學方式:先畫一些 Apple 裝置的外觀,而不是直接就畫 App 的介面。

這個作法就是我身為新手時的練習策略:

SwiftUI 剛推出時,我在找練習語法與排版規則的題目,突然低頭看到正在使用的 MacBook Air M1 鍵盤有點複雜但也滿有挑戰性,就在幾個小時內,用 300 行左右的程式碼完成了。

用 SwiftUI 畫的 MacBook Air M1 注音鍵盤

用 SwiftUI 畫的 MacBook Air M1 注音鍵盤

而最近,我則是讓學生畫 Mac mini M4。

Mac mini M4 上面

Mac mini M4 上面

Mac mini M4 正面

Mac mini M4 正面

Mac mini M4 底部

Mac mini M4 底部

其實我畫得並不完美。遠看有模有樣,放大後破綻不少。但是沒關係,重點是過程非常好玩、畫完以後成就感十足。

為什麼要畫 Mac?

我的思路很單純:用最單純有趣的方式學習排版規則

創作者正在準備中
請加入 13+ 了解最新動態!
留言
avatar-img
13+
3.5K會員
161內容數
13 以 10+ 年 iOS 開發經驗為基礎撰寫,助你在 AI 時代成為更有自信的技術工作者。 ❤️ 支持 13 創作! 🤖 AI 工具實戰經驗與深度思考 🧠 軟體開發思維、職涯發展建議 💡 實用技巧與踩坑經驗分享 😔 開發者身心健康與職業傷害
13+的其他內容
2025/09/15
Swift Dependencies 的語法設計受到 SwiftUI Environment 啟發,兩者的宣告方式幾乎完全相同。透過互相對照,讓你一次學會兩種機制。
Thumbnail
2025/09/15
Swift Dependencies 的語法設計受到 SwiftUI Environment 啟發,兩者的宣告方式幾乎完全相同。透過互相對照,讓你一次學會兩種機制。
Thumbnail
2025/04/08
帶你用全新的方式學習 SwiftUI:不是從 App 介面開始,而是從你手邊的實體物品出發,練習用 SwiftUI 描述它的外觀與結構,就像用程式碼做素描。這樣的練習能幫助你熟悉 SwiftUI 的排版語法與元件拆解邏輯。
Thumbnail
2025/04/08
帶你用全新的方式學習 SwiftUI:不是從 App 介面開始,而是從你手邊的實體物品出發,練習用 SwiftUI 描述它的外觀與結構,就像用程式碼做素描。這樣的練習能幫助你熟悉 SwiftUI 的排版語法與元件拆解邏輯。
Thumbnail
2025/04/02
SwiftUI 推出多年,仍有許多開發者遲遲無法上手。本章探討幾個關鍵障礙:缺乏練習機會、不得其門而入、學習曲線與焦慮、UIKit 心智模型的干擾等,其實這些並不難克服。我也分享如何透過 side project 建立學習動力。
2025/04/02
SwiftUI 推出多年,仍有許多開發者遲遲無法上手。本章探討幾個關鍵障礙:缺乏練習機會、不得其門而入、學習曲線與焦慮、UIKit 心智模型的干擾等,其實這些並不難克服。我也分享如何透過 side project 建立學習動力。
看更多
你可能也想看
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
這個章節主要介紹了Swift程式語言中物件導向程式設計的基本概念,包括類別、建構子、公開、私有、受保護等等的概念。同時,也介紹了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型和反射等進階特性。
Thumbnail
這個章節主要介紹了Swift程式語言中物件導向程式設計的基本概念,包括類別、建構子、公開、私有、受保護等等的概念。同時,也介紹了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型和反射等進階特性。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
這份文件的目的是介紹Swift語言,包括它的特性、應用範疇,以及誰在使用它。它也提供了一些學習Swift的資源和工具,以及一些常見的Swift庫和框架。
Thumbnail
這份文件的目的是介紹Swift語言,包括它的特性、應用範疇,以及誰在使用它。它也提供了一些學習Swift的資源和工具,以及一些常見的Swift庫和框架。
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News