付費限定

💻學習 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?

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

以行動支持創作者!付費即可解鎖
本篇內容共 1591 字、0 則留言,僅發佈於✍️ 學習 SwiftUI你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
13+
2.0K會員
121內容數
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
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
這個章節主要介紹了Swift程式語言中物件導向程式設計的基本概念,包括類別、建構子、公開、私有、受保護等等的概念。同時,也介紹了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型和反射等進階特性。
Thumbnail
這個章節主要介紹了Swift程式語言中物件導向程式設計的基本概念,包括類別、建構子、公開、私有、受保護等等的概念。同時,也介紹了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型和反射等進階特性。
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
這份文件的目的是介紹Swift語言,包括它的特性、應用範疇,以及誰在使用它。它也提供了一些學習Swift的資源和工具,以及一些常見的Swift庫和框架。
Thumbnail
這份文件的目的是介紹Swift語言,包括它的特性、應用範疇,以及誰在使用它。它也提供了一些學習Swift的資源和工具,以及一些常見的Swift庫和框架。
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
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
Thumbnail
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News