SwiftUI-基础

应用入口

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

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

兼容UIApplicationDelegate

@main
struct BasicApp: App {@UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegatevar body: some Scene { ... }
}class AppDelegate : NSObject, UIApplicationDelegate {func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {// launching...return true}
}

Swift 结构体与类的构造函数

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

视图预览

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

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

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

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

UI布局

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

VStack - 纵向布局

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

HStack - 横向布局 

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

Text - 文本

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

Button - 按钮

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

Image - 图像

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

 TextField - 文本输入

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

ScrollView - 滚动视图 

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

List - 表视图

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

TextView - 多行文本输入

@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 - 警告弹窗

@State private var showAlert = falsevar 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 - 底部弹窗

@State private var showActionSheet = falsevar 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 - 选择器

@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 inText(options[index])}}.pickerStyle(WheelPickerStyle()) // 选择器样式设置}.padding()
}