当前位置：首页 > news >正文

（1）SwiftUI基础入门教程

news 2025/10/8 9:33:58

🌱 SwiftUI 基础入门：构建静态布局

一、SwiftUI 的核心理念

SwiftUI 是一种 声明式 UI 框架。
你不再告诉系统「怎么画」界面，而是「描述界面是什么样的」。

例如：

Text("Hello, world!")

SwiftUI 会自动渲染出这段文字，而不是你手动去调用绘制方法。

二、基础控件介绍

1️⃣ Text —— 显示文字

Text("Hello, SwiftUI!").font(.title)       // 设置字体大小.fontWeight(.bold)  // 加粗.foregroundColor(.blue) // 设置文字颜色

2️⃣ Image —— 显示图片

图片文件要放在 Assets.xcassets 里。

Image("swift-logo").resizable()        // 允许缩放.scaledToFit()      // 按比例缩放.frame(width: 100, height: 100)

也可以使用系统图标（SF Symbols）：

Image(systemName: "star.fill").foregroundColor(.yellow).font(.system(size: 40))

3️⃣ Button —— 按钮（带点击动作）

Button("点我一下") {print("按钮被点击了！")
}
.font(.title2)
.padding()
.background(Color.orange)
.foregroundColor(.white)
.cornerRadius(10)

三、布局容器（Stacks）

SwiftUI 里最常用的三种布局：

布局容器	说明	用法示例
`VStack`	垂直排列	从上到下
`HStack`	水平排列	从左到右
`ZStack`	层叠排列	从后到前

1️⃣ VStack – 垂直布局

VStack {Text("上面文字")Text("下面文字")
}

2️⃣ HStack – 水平布局

HStack {Image(systemName: "heart.fill")Text("喜欢")
}

3️⃣ ZStack – 层叠布局

ZStack {Image("background").resizable().scaledToFill()Text("在背景上叠加文字").font(.title).foregroundColor(.white)
}

四、综合示例：静态界面布局

import SwiftUIstruct ContentView: View {var body: some View {ZStack {// 背景层Color(.systemTeal).ignoresSafeArea()VStack(spacing: 20) {// 标题Text("我的 SwiftUI 名片").font(.largeTitle).fontWeight(.bold).foregroundColor(.white)// 头像Image("swift-logo").resizable().scaledToFit().frame(width: 120, height: 120).clipShape(Circle()).overlay(Circle().stroke(Color.white, lineWidth: 4))// 个人信息VStack(spacing: 8) {Text("iOS 学习者").font(.title2).foregroundColor(.white)Text("从零开始学 SwiftUI 🚀").foregroundColor(.white.opacity(0.8))}// 按钮Button(action: {print("按钮点击")}) {Text("开始学习").padding().frame(maxWidth: .infinity).background(Color.white).foregroundColor(.teal).cornerRadius(12).padding(.horizontal, 40)}}}}
}#Preview {ContentView()
}