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