教程：Widget、State與構(gòu)建循環(huán)一次講透)
Shaft框架核心概念實戰(zhàn)教程Widget、State與構(gòu)建循環(huán)一次講透【免費下載鏈接】ShaftA cross-platform GUI framework for Swift, built for demanding workloads and developer ergonomics項目地址: https://gitcode.com/gh_mirrors/sh/ShaftShaft 是一個用 Swift 編寫的跨平臺 GUI 框架專為高性能應(yīng)用和開發(fā)體驗而生。本文將帶你快速上手 Shaft 框架的三大核心概念Widget組件樹、State狀態(tài)管理與構(gòu)建循環(huán)Build Loop并通過內(nèi)置的 Playground 示例看懂?dāng)?shù)據(jù)變化 → UI 自動刷新的完整鏈路。無論你是 Swift 新手還是從 Flutter / SwiftUI 轉(zhuǎn)來的開發(fā)者這篇教程都能讓你在 10 分鐘內(nèi)建立對 Shaft 的整體認知 一圖看懂 ShaftSwift 跨平臺 GUI 框架的運行現(xiàn)場先看 Shaft 框架實際跑起來的樣子——官方內(nèi)置的 Playground 應(yīng)用同時充當(dāng)交互演示和活文檔左側(cè)是導(dǎo)航、右側(cè)是實時渲染的界面還支持多窗口與 3D 場景渲染只需 3 條命令即可運行macOS / Linux / Windows 均支持git clone https://gitcode.com/gh_mirrors/sh/Shaft cd Shaft swift run PlaygroundShaft 架構(gòu)分層Widget 框架跑在哪里Shaft 把框架拆成了清晰的幾層理解這張架構(gòu)圖就能明白 Widget 的構(gòu)建循環(huán)由誰驅(qū)動Shaft Framework核心組件框架基本是把 Flutter 的 framework 層移植到 SwiftWidget、State、Element、構(gòu)建循環(huán)等概念與 Flutter 高度相通Shaft.Backend平臺抽象層提供事件循環(huán)、文本輸入等能力如 SDLBackend.swiftShaft.Renderer圖形抽象層屏蔽 Skia、CoreGraphics 等底層差異如 SkiaRenderer.swiftShaftKit內(nèi)置的高層組件工具箱提供 Button、TextField、NavigationSplitView 等開箱即用的 Widget 對新手來說你 99% 的時間只會寫 Framework ShaftKit 層的代碼平臺差異全部被封裝掉了。核心概念一Widget——UI 是組件樹不是視圖本身在 Shaft 中Widget 只是對界面的一層描述是輕量、不可變的配置對象。它分為兩種StatelessWidget無狀態(tài)組件描述一段靜態(tài) UI框架調(diào)用build(context:)遞歸地把它拆解為更具體的子組件最終落到可渲染的節(jié)點上。核心定義見 Framework.swiftpublic protocol StatelessWidget: Widget { func build(context: BuildContext) - Widget }StatefulWidget有狀態(tài)組件當(dāng) UI 需要在生命周期內(nèi)動態(tài)變化計數(shù)、動畫、輸入框焦點等就用 StatefulWidget。它通過createState()生成一個獨立的State對象來持有可變數(shù)據(jù)public protocol StatefulWidget: Widget { associatedtype StateType: StateSelf func createState() - StateType }一個最小的有狀態(tài)組件長這樣摘自內(nèi)置文檔頁 Concept_ShaftKit.swiftfinal class Concept_ShaftKit: StatefulWidget { func createState() - some StateConcept_ShaftKit { Concept_ShaftKitState() } } final class Concept_ShaftKitState: StateConcept_ShaftKit { override func build(context: BuildContext) - Widget { ... } }核心概念二State——兩種方式讓 UI 跟隨數(shù)據(jù)變化這是 Shaft 最省心的地方你幾乎不需要手動管理狀態(tài)框架提供兩條互補的路徑。方式 1setState 顯式刷新State基類提供了setState回調(diào)會同步執(zhí)行并立刻把當(dāng)前組件標(biāo)記為臟等待下一幀重建setState { myValue newValue // 數(shù)據(jù)先變再通知框架 }其內(nèi)部實現(xiàn)只有兩步Framework.swift執(zhí)行閉包 →element.markNeedsBuild()。方式 2Observable 自動同步推薦 ?Shaft 直接基于 Swift 的 Observation 框架做響應(yīng)式綁定——只要數(shù)據(jù)類打上Observable宏在 build 階段讀取它的屬性就自動建立依賴值一變對應(yīng)組件自動標(biāo)記臟并在下一幀重建Observable class Counter { var count 0 } let counter Counter() class CounterView: StatelessWidget { func build(context: any BuildContext) - any Widget { Column { Text(Count: \(counter.count)) Button { counter.count 1 // 改數(shù)據(jù)即可無需手動 setState } child: { Text(Increment) } } } }嵌套的Observable對象同樣支持——購物清單里每個條目都是獨立可觀察對象改數(shù)量只刷新用到它的組件。完整交互示例見 Concept_Observation.swiftPlayground 中 Observation 頁可實時體驗。核心概念三構(gòu)建循環(huán)——一幀是如何畫出來的理解了構(gòu)建循環(huán)你就理解了整個框架的心跳。流程是標(biāo)記臟節(jié)點setState或Observable屬性變化 → 調(diào)用markNeedsBuild()組件進入臟列表dirtyElements調(diào)度幀SchedulerBinding.swift 的scheduleFrame()向 Backend 申請新幀重建Build PhasebuildScope把所有臟 Element 按深度排序后依次rebuild()——只重建臟的子樹這就是性能的關(guān)鍵布局 繪制渲染樹完成 layout/paint交給 Renderer如 Skia輸出到窗口數(shù)據(jù)變化Observable / setState │ ▼ markNeedsBuild() ──? 臟列表dirtyElements │ ▼ 下一幀按深度排序 → 逐個 rebuild() → 布局 → 繪制這套機制保證了即使界面里有 1000 個組件數(shù)據(jù)只影響其中一個時也只有那一小塊會重建。官方基準(zhǔn)測試M1 Max2021 MacBook Pro顯示 Shaft 在 CPU 與內(nèi)存占用上都非?？酥茖崙?zhàn)把三個概念串起來現(xiàn)在把前面內(nèi)容組合成一個完整心智模型概念角色對應(yīng)源碼位置WidgetUI 的不可變描述組成組件樹Framework.swiftState持有可變數(shù)據(jù)setState/ 觀察數(shù)據(jù)同上ElementWidget 在樹中的活實例臟標(biāo)記打在這里同上Element類構(gòu)建循環(huán)調(diào)度器 BuildOwner每幀只重建臟節(jié)點SchedulerBinding.swift想動手練習(xí)Playground 里 Concepts → Observation / ShaftKit 頁面就是可交互的教程直接swift run Playground打開即可。新手上手路線建議 ?先跑起來swift run Playground逛一遍 Concepts 與 Demos 頁面讀內(nèi)置文檔Concept_Observation.swift 和 Concept_ShaftKit.swift 是最好的活文檔理解分層對照架構(gòu)圖看 Backend.swift 與 Renderer.swift 兩個協(xié)議寫自己的應(yīng)用從 ShaftKit 的高層組件Sources/Shaft/ShaftKit/開始用Observable做數(shù)據(jù)同步少用手動setState掌握 Widget、State 與構(gòu)建循環(huán)這三塊拼圖你就擁有了閱讀和擴展 Shaft 框架的完整地圖——接下來無論是自定義 ShaftKit 樣式還是接入自定義 Backend / Renderer都有據(jù)可依了?！久赓M下載鏈接】ShaftA cross-platform GUI framework for Swift, built for demanding workloads and developer ergonomics項目地址: https://gitcode.com/gh_mirrors/sh/Shaft創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Shaft框架核心概念實戰(zhàn)教程：Widget、State與構(gòu)建循環(huán)一次講透
Shaft框架核心概念實戰(zhàn)教程Widget、State與構(gòu)建循環(huán)一次講透【免費下載鏈接】ShaftA cross-platform GUI framework for Swift, built for demanding workloads and developer ergonomics項目地址: https://gitcode.com/gh_mirrors/sh/ShaftShaft 是一個用 Swift 編寫的跨平臺 GUI 框架專為高性能應(yīng)用和開發(fā)體驗而生。本文將帶你快速上手 Shaft 框架的三大核心概念Widget組件樹、State狀態(tài)管理與構(gòu)建循環(huán)Build Loop并通過內(nèi)置的 Playground 示例看懂?dāng)?shù)據(jù)變化 → UI 自動刷新的完整鏈路。無論你是 Swift 新手還是從 Flutter / SwiftUI 轉(zhuǎn)來的開發(fā)者這篇教程都能讓你在 10 分鐘內(nèi)建立對 Shaft 的整體認知 一圖看懂 ShaftSwift 跨平臺 GUI 框架的運行現(xiàn)場先看 Shaft 框架實際跑起來的樣子——官方內(nèi)置的 Playground 應(yīng)用同時充當(dāng)交互演示和活文檔左側(cè)是導(dǎo)航、右側(cè)是實時渲染的界面還支持多窗口與 3D 場景渲染只需 3 條命令即可運行macOS / Linux / Windows 均支持git clone https://gitcode.com/gh_mirrors/sh/Shaft cd Shaft swift run PlaygroundShaft 架構(gòu)分層Widget 框架跑在哪里Shaft 把框架拆成了清晰的幾層理解這張架構(gòu)圖就能明白 Widget 的構(gòu)建循環(huán)由誰驅(qū)動Shaft Framework核心組件框架基本是把 Flutter 的 framework 層移植到 SwiftWidget、State、Element、構(gòu)建循環(huán)等概念與 Flutter 高度相通Shaft.Backend平臺抽象層提供事件循環(huán)、文本輸入等能力如 SDLBackend.swiftShaft.Renderer圖形抽象層屏蔽 Skia、CoreGraphics 等底層差異如 SkiaRenderer.swiftShaftKit內(nèi)置的高層組件工具箱提供 Button、TextField、NavigationSplitView 等開箱即用的 Widget 對新手來說你 99% 的時間只會寫 Framework ShaftKit 層的代碼平臺差異全部被封裝掉了。核心概念一Widget——UI 是組件樹不是視圖本身在 Shaft 中Widget 只是對界面的一層描述是輕量、不可變的配置對象。它分為兩種StatelessWidget無狀態(tài)組件描述一段靜態(tài) UI框架調(diào)用build(context:)遞歸地把它拆解為更具體的子組件最終落到可渲染的節(jié)點上。核心定義見 Framework.swiftpublic protocol StatelessWidget: Widget { func build(context: BuildContext) - Widget }StatefulWidget有狀態(tài)組件當(dāng) UI 需要在生命周期內(nèi)動態(tài)變化計數(shù)、動畫、輸入框焦點等就用 StatefulWidget。它通過createState()生成一個獨立的State對象來持有可變數(shù)據(jù)public protocol StatefulWidget: Widget { associatedtype StateType: StateSelf func createState() - StateType }一個最小的有狀態(tài)組件長這樣摘自內(nèi)置文檔頁 Concept_ShaftKit.swiftfinal class Concept_ShaftKit: StatefulWidget { func createState() - some StateConcept_ShaftKit { Concept_ShaftKitState() } } final class Concept_ShaftKitState: StateConcept_ShaftKit { override func build(context: BuildContext) - Widget { ... } }核心概念二State——兩種方式讓 UI 跟隨數(shù)據(jù)變化這是 Shaft 最省心的地方你幾乎不需要手動管理狀態(tài)框架提供兩條互補的路徑。方式 1setState 顯式刷新State基類提供了setState回調(diào)會同步執(zhí)行并立刻把當(dāng)前組件標(biāo)記為臟等待下一幀重建setState { myValue newValue // 數(shù)據(jù)先變再通知框架 }其內(nèi)部實現(xiàn)只有兩步Framework.swift執(zhí)行閉包 →element.markNeedsBuild()。方式 2Observable 自動同步推薦 ?Shaft 直接基于 Swift 的 Observation 框架做響應(yīng)式綁定——只要數(shù)據(jù)類打上Observable宏在 build 階段讀取它的屬性就自動建立依賴值一變對應(yīng)組件自動標(biāo)記臟并在下一幀重建Observable class Counter { var count 0 } let counter Counter() class CounterView: StatelessWidget { func build(context: any BuildContext) - any Widget { Column { Text(Count: \(counter.count)) Button { counter.count 1 // 改數(shù)據(jù)即可無需手動 setState } child: { Text(Increment) } } } }嵌套的Observable對象同樣支持——購物清單里每個條目都是獨立可觀察對象改數(shù)量只刷新用到它的組件。完整交互示例見 Concept_Observation.swiftPlayground 中 Observation 頁可實時體驗。核心概念三構(gòu)建循環(huán)——一幀是如何畫出來的理解了構(gòu)建循環(huán)你就理解了整個框架的心跳。流程是標(biāo)記臟節(jié)點setState或Observable屬性變化 → 調(diào)用markNeedsBuild()組件進入臟列表dirtyElements調(diào)度幀SchedulerBinding.swift 的scheduleFrame()向 Backend 申請新幀重建Build PhasebuildScope把所有臟 Element 按深度排序后依次rebuild()——只重建臟的子樹這就是性能的關(guān)鍵布局 繪制渲染樹完成 layout/paint交給 Renderer如 Skia輸出到窗口數(shù)據(jù)變化Observable / setState │ ▼ markNeedsBuild() ──? 臟列表dirtyElements │ ▼ 下一幀按深度排序 → 逐個 rebuild() → 布局 → 繪制這套機制保證了即使界面里有 1000 個組件數(shù)據(jù)只影響其中一個時也只有那一小塊會重建。官方基準(zhǔn)測試M1 Max2021 MacBook Pro顯示 Shaft 在 CPU 與內(nèi)存占用上都非?？酥茖崙?zhàn)把三個概念串起來現(xiàn)在把前面內(nèi)容組合成一個完整心智模型概念角色對應(yīng)源碼位置WidgetUI 的不可變描述組成組件樹Framework.swiftState持有可變數(shù)據(jù)setState/ 觀察數(shù)據(jù)同上ElementWidget 在樹中的活實例臟標(biāo)記打在這里同上Element類構(gòu)建循環(huán)調(diào)度器 BuildOwner每幀只重建臟節(jié)點SchedulerBinding.swift想動手練習(xí)Playground 里 Concepts → Observation / ShaftKit 頁面就是可交互的教程直接swift run Playground打開即可。新手上手路線建議 ?先跑起來swift run Playground逛一遍 Concepts 與 Demos 頁面讀內(nèi)置文檔Concept_Observation.swift 和 Concept_ShaftKit.swift 是最好的活文檔理解分層對照架構(gòu)圖看 Backend.swift 與 Renderer.swift 兩個協(xié)議寫自己的應(yīng)用從 ShaftKit 的高層組件Sources/Shaft/ShaftKit/開始用Observable做數(shù)據(jù)同步少用手動setState掌握 Widget、State 與構(gòu)建循環(huán)這三塊拼圖你就擁有了閱讀和擴展 Shaft 框架的完整地圖——接下來無論是自定義 ShaftKit 樣式還是接入自定義 Backend / Renderer都有據(jù)可依了?！久赓M下載鏈接】ShaftA cross-platform GUI framework for Swift, built for demanding workloads and developer ergonomics項目地址: https://gitcode.com/gh_mirrors/sh/Shaft創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考