SwiftUI Form 사용하기

• 이번에는 SwiftUI에서 Form을 어떻게 사용하는지 알아보겠습니다.

Form 기본

• SwiftUI의 Form은 HStack이나 VStack과 같은 컨테이너와 비슷하게 작동합니다.
• 즉, Form 안에 여러 뷰를 넣을 수 있다는 것입니다.
• 단지, 특정 컨트롤 요소에 대해 더 보기 좋고 잘 작동하게 해줍니다.
• 다음 예시를 보면, 네비게이션 뷰 안에 Form이 있고 그 안에 토글 스위치와 버튼이 있습니다.
• 실행해보면, 토글 스위치와 버튼이 Form 형태로 차례대로 담기는 것을 볼 수 있습니다.

struct ContentView : View {
  @State var toggling = false
  
  var body: some View {
    NavigationView {
      Form {
        Toggle(isOn: $toggling) {
          Text("Toggly")
        }
        Button {
          print("Saved")
        } label: {
          Text("Save changes")
        }
      }.navigationBarTitle(Text("Settings"))
    }
  }
}

Section 나누기

• Form의 섹션을 나누기 위해서는 Form 안에서 Section 별로 구분 지어주면 됩니다.
• 다음 예시는 Form을 3개의 Section으로 나눴는데요.
• 하나의 섹션에는 타이틀과 토글 스위치, 다른 섹션에는 여러개의 Text, 그리고 마지막 섹션에는 버튼과 footer가 있습니다.
• 실행해보면, 섹션이 나뉘어 있는 것을 볼 수 있습니다.

struct ContentView : View {
  @State var toggling = false
  
  var body: some View {
    NavigationView {
      Form {
        Section("Title") {
          Toggle(isOn: $toggling) {
            Text("Toggly")
          }
        }
        Section {
          Text("Texty")
          Text("Texty")
          Text("Texty")
        }
        Section {
          Button("Save changes") {
            print("Saved")
          }
        } footer: {
          Text("footer")
        }
      }.navigationBarTitle(Text("Settings"))
    }
  }
}

Form 활성화 및 비활성화

• Form의 특정 뷰를 활성 또는 비활성 할 수 있는데요.
• Toggle 스위치에 따라 toggling 변수에 담기는 bool 값이 변경되고 그 값이 .disabled를 통해 버튼 뷰의 활성화 여부를 결정합니다.
• 실행해보면, 토글 스위치에 따라 버튼이 활성화 되는 것을 볼 수 있습니다.

struct ContentView : View {
  @State var toggling = false
  
  var body: some View {
    NavigationView {
      Form {
        Section("Title") {
          Toggle(isOn: $toggling) {
            Text("Toggly")
          }
          Button("Save changes") {
            print("Saved")
          }.disabled(!toggling)
        }
      }.navigationBarTitle(Text("Settings"))
    }
  }
}

Form 숨기기

• Form 안의 view를 비활성화 하는 것 뿐만 아니라, 아예 숨길 수도 있습니다.
• 다음과 같이 토글 스위치 변수의 값에 따라 또 다른 토글 스위치의 보이고 안 보이고를 결정할 수 있는데요.
• if 문을 사용하면 됩니다.
• 실행해보면, 토글 스위치에 따라 다른 토글 스위치가 숨겨집니다.

struct ContentView : View {
  @State var showingAdvancedOptions = false
  @State var toggling = false
  
  var body: some View {
    Form {
      Section {
        Toggle(isOn: $showingAdvancedOptions) {
          Text("Show advanced options")
        }
        if showingAdvancedOptions {
          Toggle(isOn: $toggling) {
            Text("Advanced option")
          }
        }
      }
    }
  }
}

마무리

• 이렇게 해서 SwiftUI에서는 Form을 어떻게 만드는지에 대해 알아봤습니다.