16-18일: SwiftUI의 100일 - WeSplit(프로젝트 1)

위스플릿 프로젝트

이 프로젝트는 @State , Form , NavigationView , TextField 및 Picker 와 같이 일반적으로 사용되는 보기 및 개념을 소개하는 SwiftUI에 대한 소개를 의미합니다. WeSplit은 사용자가 수표 비용, 비용을 분담하는 사람 수, 남기고 싶은 팁의 양을 입력해야 하는 수표 분할 앱입니다.

양식 만들기

SwiftUI에는 데이터 입력을 처리하기 위한 전용 양식 보기가 있습니다. 양식은 정적 컨트롤의 스크롤 목록입니다.

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

내비게이션 바 추가

NavigationView 보기에 래핑된 보기에 탐색 모음이 추가됩니다. 수정자.navigationTitle() 및 .navigationBarTitleDisplayMode(.inline)를 추가하여 제목을 추가하고 글꼴을 변경할 수도 있습니다.

NavigationView {
    Form {
        Section {
            Text("Hello, world!")
        }
    }
    .navigationTitle("SwiftUI")
    .navigationBarTitleDisplayMode(.inline)
}

프로그램 상태 수정

SwiftUI 보기는 구조체이지만 함수를 사용하여 속성을 업데이트할 수 없습니다mutating. 대신 @State 속성 래퍼를 사용합니다. 속성을 수정할 수 있는 위치에 SwiftUI에 의해 별도로 저장할 수 있습니다.

struct ContentView: View {
    @State var tapCount = 0

    var body: some View {
        Button("Tap Count: \(tapCount)") {
            self.tapCount += 1
        }
    }
}

UI 컨트롤에 상태 바인딩

상태를 뷰에 전달하고 변경 사항을 소스 상태로 다시 업데이트/동기화하려는 경우 양방향 바인딩을 만듭니다. 상태의 접두사로 $를 사용합니다.

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Hello, world!")
        }
    }
}

루프에서 보기 만들기

ForEach는 배열/범위를 반복하고 반복할 때마다 다른 보기를 만들기 위한 보기 유형입니다. ForEach는 사용자가 선택할 수 있는 다양한 옵션을 표시할 수 있는 SwiftUIPicker 보기로 작업할 때 특히 유용합니다.

struct ContentView: View {
    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = "Harry"

    var body: some View {
        Picker("Select your student", selection: $selectedStudent) {
            ForEach(0 ..< students.count) {
                Text(self.students[$0])
            }
        }
    }
}

WeSplit 앱의 소스 코드는 여기에서 찾을 수 있습니다.