[iOS/SwiftUI] Form, Group, Section, Controls

Form

애플 공식 문서

• 뷰를 포함 시킬 수 있는 Containe
• Control을 그룹핑 할 수 있음. 특정 컨트롤에 대해 지정된 UI를 보여줌. 아래 글 참고
• 주로 설정화면이나 기본 앱의 리스트에서 사용됨
• Form 영역 스크롤링 가능

struct Form<Content> where Content : View

 

코드 전체 깃 허브 링크

---

Group

• 폼은 최대 10개의 뷰를 포함 할 수 있기 때문에 Group 을 사용하면 더 많은 뷰를 포함 시킬 수 있음

        Form {
            Group {
                Text("Hello, world! 1")
                Text("Hello, world! 2")
                Text("Hello, world! 3")
                Text("Hello, world! 4")
                Text("Hello, world! 5")
                Text("Hello, world! 6")
                Text("Hello, world! 7")
            }
            
            Group {
                Text("Hello, world! 8")
                Text("Hello, world! 9")
                Text("Hello, world! 10")
                Text("Hello, world! 11")
                Text("Hello, world! 12")
                Text("Hello, world! 13")
                Text("Hello, world! 14")
            }
        }

 

Section

        Form {
            Section {
                Text("1")
                Text("2")
            }
            
            Section {
                Text("3")
                Text("4")
            }
        }

• Section을 사용해서 영역을 분할 할 수 있음

Section에 타이틀 지정하기

        Form {
            Section("첫 번째 메뉴") {
                Text("1")
                Text("2")
            }
            
            Section("두 번째 메뉴") {
                Text("3")
                Text("4")
            }
        }

• 섹션 각 상단에 타이틀이 생성된 것을 확인 할 수 있으며 옵셔널 값이기 때문에 생략할 수 있음

Controls

Button

                Button("버튼") {
                    print("test")
                }

    @State var isOn = true
    
    //.. 생략
    
    Button("버튼") {
        print("test")
    }.disabled(!isOn)

• disabled를 이용해서 버튼을 비활성화 시켜 줄 수 있음

Toggle

                Toggle(isOn: $isOn) {
                    Text("토글")
                }

Picker

enum Food {
    case noodle
    case apple
    case rice
    
    var title: String {
        switch self {
        case .noodle:
            return "국수"
        case .apple:
            return "사과"
        case .rice:
            return "쌀밥"
        }
    }
}

@State var menu = Food.noodle
// 생략

Picker("오늘의 메뉴", selection: $menu) {
    Text(Food.noodle.title).tag(Food.noodle)
    Text(Food.apple.title).tag(Food.apple)
    Text(Food.rice.title).tag(Food.rice)
}

 

TextField

@State var name = ""
// ...생략

TextField("이름을 입력하세요.", text: $name)

• 사용자의 키보드 입력을 받을 수 있는 TextField를 포함 시킬 수 있음

 

참고 사이트

https://www.hohyeonmoon.com/blog/swiftui-tutorial-form/

https://ios-development.tistory.com/1096

https://www.simpleswiftguide.com/swiftui-form-tutorial-how-to-create-and-use-form-in-swiftui/