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()
}
相关推荐
Johnny Tong11 小时前
iOS 获取设备占用内存
ios·内存·host_vm
木兰不吃草11 小时前
如何在 Mac 上下载安装仙剑游戏仙剑世界?可以通过IPA砸壳包安装非常简单
游戏·macos·ios·游戏程序·mac
帅次11 小时前
Flutter 异步编程利器:Future 与 Stream 深度解析
android·flutter·ios·小程序·kotlin·webview·android-studio
小鹿撞出了脑震荡14 小时前
Effective Objective-C 2.0 读书笔记——大中枢派发
开发语言·ios·objective-c
struggle202515 小时前
Ollmao (OH-luh-毛程序包及源码) 是一款原生 SwiftUI 应用程序,它与 Ollama 集成,可在 Mac 上本地运行强大的 AI 模型
ios·swiftui·swift
神仙别闹1 天前
基于IOS实现各种倒计时功能
macos·ios·cocoa
gp1031 天前
iOS事件传递和响应
ios·响应链·事件传递
SunshineBrother2 天前
Flutter go_router 路由管理详解&封装
android·flutter·ios
倾云鹤3 天前
iOS实现生物识别
ios·生物识别
柚鸥ASO优化3 天前
适用于iOS的应用商店优化(ASO)清单
ios·aso优化