SwiftUI-基础 - 技术栈

应用入口

Main函数与App结构体的绑定，遵循App协议

Swift 复制代码

@main
struct BaseApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

兼容UIApplicationDelegate

Swift 复制代码

@main
struct BasicApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    var body: some Scene { ... }
}

class AppDelegate : NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        // launching...
        return true
    }
}

Swift 结构体与类的构造函数

Swift 复制代码

// struct
struct BasicApp: App {
    init() { ... }
}

// class
class AppDelegate: NSObject, UIApplicationDelegate {
    override init () { ... }
}

视图预览

遵守View协议，定义View结构体

Swift 复制代码

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

遵守PreviewProvider协议，定义Previews结构体

Swift 复制代码

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

UI布局

Swift 复制代码

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 30) {
            Text("文本")
                .foregroundColor(.black)
            Button {
                print("target_action")
            } label: {
                Text("按钮")
                    .foregroundColor(.blue)
            }
        }
    }
}

VStack - 纵向布局

Swift 复制代码

var body: some View {
    VStack(alignment: .leading, spacing: 10) { // 左对齐、元素间隔10px
        Text("Column 1")
        Text("Column 2")
    }
    .padding(20) // 内边距20px
}

HStack - 横向布局

Swift 复制代码

var body: some View {
    HStack(spacing: 10) { // 居中、元素间隔10px
        Text("Column 1")
        Text("Column 2")
    }
    .padding() // 内边距-默认值
}

Text - 文本

Swift 复制代码

var body: some View {
    Text("Hello, SwiftUI!")
        .font(.title) // 字体设置
        .foregroundColor(.blue) // 文本颜色设置
        .multilineTextAlignment(.center) // 多行文本对齐方式设置
        .lineLimit(1) // 文本行数限制设置
}

Button - 按钮

Swift 复制代码

var body: some View {
    Button { 
        print("Button tapped") // 按钮点击事件处理
    } label: {
        Text("Click Me") // 按钮显示的文本
            .font(.title) // 字体设置
            .padding() // 内边距设置
            .background(Color.blue) // 背景颜色设置
            .foregroundColor(.white) // 前景颜色设置
            .cornerRadius(10) // 圆角设置
    }
}

Image - 图像

Swift 复制代码

var body: some View {
    Image("exampleImage") // 根据名称加载图像
        .resizable() // 图像可调整大小
        .frame(width: 100, height: 100) // 设置图像框的尺寸
        .background(.gray)
}

TextField - 文本输入

Swift 复制代码

@State private var textInput: String = ""
        
var body: some View {
    VStack {
        TextField("Enter text", text: $textInput)
            .textFieldStyle(RoundedBorderTextFieldStyle()) // 输入框样式设置
            .padding() // 内边距设置
        Text("You entered: \(textInput)")
    }
    .padding()
}

ScrollView - 滚动视图

Swift 复制代码

var body: some View {
    ScrollView {
        ForEach(1...10, id: \.self) { index in
            Text("Item \(index)")
                .padding()
        }
    }
}

List - 表视图

Swift 复制代码

var body: some View {
    List {
        Text("Row 1")
        Text("Row 2")
        Text("Row 3")
    }
    .listStyle(InsetListStyle()) // 样式设置
}

TextView - 多行文本输入

Swift 复制代码

@State private var textInput: String = ""
    
var body: some View {
    VStack {
        TextEditor(text: $textInput) // 多行文本输入视图
            .frame(height: 200) // 设置高度
            .border(Color.gray, width: 1) // 边框设置
        Text("You entered: \(textInput)")
    }
    .padding()
}

Alert - 警告弹窗

Swift 复制代码

@State private var showAlert = false
    
var body: some View {
    Button {
        showAlert = true
    } label: {
        Text("Show Alert")
    }
    .alert(isPresented: $showAlert) {
        Alert(title: Text("Warning"), message: Text("This is an alert!"), dismissButton: .default(Text("OK")))
    }
}

ActionSheet - 底部弹窗

Swift 复制代码

@State private var showActionSheet = false
        
var body: some View {
    Button {
        showActionSheet = true
    } label: {
        Text("Show ActionSheet")
    }
    .actionSheet(isPresented: $showActionSheet) {
        ActionSheet(title: Text("Options"), message: Text("Choose an action"), buttons: [
            .default(Text("Option 1"), action: {
                // Option 1 action
            }),
            .default(Text("Option 2"), action: {
                // Option 2 action
            }),
            .cancel() // 取消按钮
        ])
    }
}

Picker - 选择器

Swift 复制代码

@State private var selectedOption = 0
let options = ["Option 1", "Option 2", "Option 3"]
        
var body: some View {
    VStack {
        Text("Selected option: \(options[selectedOption])")
        Picker("Options", selection: $selectedOption) {
            ForEach(0..<options.count, id: \.self) { index in
                Text(options[index])
            }
        }
        .pickerStyle(WheelPickerStyle()) // 选择器样式设置
    }
    .padding()
}