1. SwitftUI 앱의 기본 구조 이해하기
...App.swift
import SwiftUI
@main
struct WeSplitApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
// 앱 실행을 위한 코드가 포함되어 있습니다. 앱이 시작될 때 무언가를 만들고
// 전체 시간 동안 활성 상태로 유지하는 경우 여기에 넣는다.
ContentView.swift
// 프로그램의 초기 사용자 인터페이스가 포함되어 있으며 이곳에서 프로젝트의 모든 작업을 수행한다
import SwiftUI
// 스위프트에 SwiftUI 프레임워크가 제공하는 모든 기능을 사용하고 싶다고 알려준다.
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
// View는 SwiftUI에서 왔으며, 화면에 그리려는 모든 항목에 채택되어햐 하는 기본 프로토콜이다.
// ContentView는 위 프로토콜을 준수하는 구조체이다.
// var body: some View 는 계산속성이다. 이것은 우리의 레이아웃인 프로토콜을 준수하는 것을 반환한다는 것을 의미한다.
//
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// PreviewProvider 프로토콜을 준수하는 구조체 ContentView_Previews
// 이 코드 조각은 실제로 App Store로 이동하는 최종앱의 일부가 아니지만
// Xcode에서 UI디자인의 미리보기를 표시할 수 있다.
Assets.xcassets
// 앱에서 사용하료는 사진 모음 목록이다. 앱아이콘 등등
Content Preview
// 사용자 인터페이스를 디자인할 때 프로그램이 실행됨
2. 프로그램 상태 수정
struct ContentView: View {
@State var tapCount = 0 // 속성 래퍼 @State 프로그램 상태를 저장하는 변수에 속성래처 사용
var body: some View {
Button("Tap Count: \\(tapCount)") {
self.tapCount += 1
}
}
}
3. UI 컨트롤에 상태 바인딩
struct ContentView: View {
@State private var name = "" // @State
var body: some View {
Form {
TextField("Enter your name", text: $name) // $name 텍스트필드가 name 속성에 바인딩
Text("Hello, world!")
}
}
}
// 텍스트 필드와 name속성을 양방향 바인딩하여 텍스트필드를 변경하면 속성도 업데이트 되도록한다.
// 스위프트에서 이러한 양방향 바인딩을 특수기호 $로 표시한다
4. 반복문에서 뷰 만들기
struct ContentView: View {
let students = ["Harry", "Hermione", "Ron"]
@State private var selectedStudent = "Harry"
var body: some View {
NavigationView {
Form {
Picker("Select your student", selection: $selectedStudent) {
ForEach(students, id: \\.self) { // \\.self 항상 고유한 문자열이 있다.
Text($0)
}
}
}
}
}
}
5. TextField를 사용해 사용자의 텍스트 읽기
struct ContentView: View {
@State private var checkAmount = 0.0
@State private var numberOfPeople = 2
@State private var tipPercentage = 20
let tipPercentages = [10, 15, 20, 25, 0]
var body: some View {
NavigationView {
Form {
Section {
TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
.keyboardType(.decimalPad)
}
Section {
Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
}
}
}
}
}
6. Form에서 Picker 만들기
struct ContentView: View {
@State private var checkAmount = 0.0
@State private var numberOfPeople = 2
@State private var tipPercentage = 20
let tipPercentages = [10, 15, 20, 25, 0]
var body: some View {
NavigationView {
Form {
Section {
TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
.keyboardType(.decimalPad)
Picker("Number of people", selection: $numberOfPeople) {
ForEach(2 ..< 100) {
Text("\\($0) people")
}
}
}
Section {
Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
}
}.navigationTitle("WeSplit")
}
}
}
7. @FocusState