(1)SwiftUI 的哲学:声明式 UI vs 命令式 UI

🧭 SwiftUI 的哲学:声明式 UI vs 命令式 UI

"我描述 UI,而不是命令 UI。"


一、从 UIKit 到 SwiftUI:UI 思维方式的根本转变

如果你曾经写过 UIKit,那么你对这样的代码一定非常熟悉:

swift 复制代码
let label = UILabel()
label.text = "Hello, world!"
label.textColor = .blue
view.addSubview(label)

UIKit 的编程方式是 命令式(Imperative):

程序员告诉系统 一步一步 地做什么。

就像你在告诉厨师:

"先切菜,然后开火,再加油,再炒五分钟。"

这种方式虽然可控,但繁琐、冗长、难以维护。


二、SwiftUI 的哲学:描述"结果",而不是"过程"

SwiftUI 的思想是 声明式(Declarative) 。

你不再告诉系统"如何去做",而是描述"我想要什么"。

swift 复制代码
var body: some View {
    Text("Hello, world!")
        .foregroundColor(.blue)
}

这段代码的含义是:

"我想要一个显示'Hello, world!'的蓝色文本。"

系统会自动决定何时渲染、如何布局、何时更新。

你描述的是 UI 状态(what it is) ,而不是 UI 操作步骤(how to do it)。


三、声明式与命令式的核心区别

对比维度 命令式(UIKit) 声明式(SwiftUI)
思维方式 指令式,告诉系统每一步怎么做 描述式,告诉系统最终想要的结果
状态管理 由开发者维护(常见状态错乱、同步难) 由框架自动追踪(@State、@Binding)
视图更新 手动触发 reloadData()、setNeedsLayout() 状态变化自动驱动 UI 重绘
复杂界面 随着逻辑增长,控制器爆炸 状态驱动式结构更清晰、可组合
可读性 代码像"菜谱" 代码像"蓝图"

四、一个简单示例对比

🧱 UIKit(命令式)

swift 复制代码
class CounterViewController: UIViewController {
    var count = 0
    let label = UILabel()
    let button = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        label.text = "Count: 0"
        button.setTitle("Add", for: .normal)
        button.addTarget(self, action: #selector(increment), for: .touchUpInside)
        view.addSubview(label)
        view.addSubview(button)
    }

    @objc func increment() {
        count += 1
        label.text = "Count: \(count)"
    }
}

👉 你在命令系统:

"当按钮被点击时,调用 increment,再更新 label 的文字。"


🌱 SwiftUI(声明式)

swift 复制代码
struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Add") {
                count += 1
            }
        }
    }
}

👉 你只是声明:

"我有一个 count 状态,它变化时界面自动刷新。"

无需告诉 SwiftUI "怎么刷新",它自己会"观察状态"并重绘视图。

这就是 "UI 是状态的函数" 这一理念的体现:

swift 复制代码
UI = f(State)

五、SwiftUI 背后的哲学思想

SwiftUI 的哲学与 函数式编程(Functional Programming) 思想息息相关。

  1. 视图 = 状态的映射函数

    • 视图不是独立的,而是由数据(状态)自动生成的结果。
    • 改变状态 ≈ 改变数据 → UI 自然更新。
  2. 数据单向流动(Unidirectional Data Flow)

    • 数据只从上层流向下层视图。
    • @State → @Binding → 子组件,减少状态混乱。
  3. 最小可变性(Immutable by default)

    • 除非使用 @State、@ObservedObject,否则所有 View 都是不可变的。
    • 这使得 SwiftUI 的视图是"纯函数式"的。
  4. 组合优于继承(Composition over Inheritance)

    • UIKit 中大量依赖继承(UIViewController、UIView)。
    • SwiftUI 使用"View 组合",像搭积木一样拼装界面。

六、SwiftUI 的哲学口号:

"Don't tell me how. Tell me what."

(别告诉我怎么做,告诉我你想要什么。)

在 UIKit 时代,我们管理"控件";

在 SwiftUI 时代,我们管理"状态"。

UIKit 是命令式的"导演";

SwiftUI 是声明式的"剧本"。


七、为什么这很重要?

因为 SwiftUI 不是"另一个 UI 框架",

它是 苹果生态未来十年的 UI 思想基石。

这种声明式哲学:

  • 更适合并发与异步环境(结合 @MainActor、async/await)
  • 更天然适应多平台(iOS / watchOS / macOS / tvOS)
  • 更易测试、更易维护

学习 SwiftUI,不仅是学语法,更是 重塑思维方式。


八、结语

UIKit 教我们控制一切;

SwiftUI 教我们放手,让系统帮你做繁琐的工作。

所以当你写下:

swift 复制代码
Text("Hello, world!")

这不仅是一行代码,更是一种宣言:

"我不再命令 UI,我描述 UI。"

"我不再操作状态,我表达状态。"

这就是 SwiftUI 的哲学。

相关推荐
ndsc_d16 小时前
AI生成的UI如何继续修改?画布内生成与独立AI设计工具比较
人工智能·ui·ai·ui设计·ai设计·ai设计工具·ai生成ui
理想三旬(づ ̄3 ̄)づ╭~20 小时前
深入理解 AG-UI 协议:Agent 与前端实时交互的底层原理
ui
爬楼的猪20 小时前
一个轻量化的Codex Web UI
人工智能·ui·chatgpt·ai编程
copilot中国版2 天前
Outlook Copilot|客户沟通
ui·copilot·outlook
Cx330❀2 天前
Qt 界面美化指南:从零掌握 QSS 核心机制与工程实践
开发语言·qt·ui·性能优化·图形渲染
兰亭妙微UI设计公司2 天前
兰亭妙微ui咨询公司分享:设计原则及组件详解
ui
东坡肘子2 天前
当 Build in Public 重新转入地下 -- 肘子的 Swift 周报 #157
人工智能·swiftui·swift
兰亭妙微UI设计公司2 天前
兰亭妙微界面设计公司分享:DeepSeek AI智能助手应用UI/UX设计深度解析
人工智能·ui·ux
沫璃染墨3 天前
《Qt从零入门系列(十三):QSS样式表详解——从选择器与层叠规则到控件美化实战》
开发语言·css·c++·qt·ui·qt6.3·qss
OliverQiu3 天前
开源一个 macOS 小工具:集中管理 ChatGPT 的网络启动配置
macos·chatgpt·swiftui·mac·proxy·codex·dmg