List , form
List
Swift의 List는 SwiftUI에서 동적인 목록을 생성하는 데 사용되는 UI 구성 요소입니다.
List의 주요한 특징으로는
1.동적 데이터: List는 데이터 소스와 연결되어 있으며, 배열이나 다른 컬렉션의 데이터를 기반으로 항목을 생성합니다. 데이터가 변경되면 UI도 자동으로 업데이트됩니다.
2.스크롤:List는 스크롤 가능한 목록을 제공합니다. 목록을 쉽게 탐색할 수 있으며, 많은 데이터를 효과적으로 표시할 수 있습니다.
3.커스터마이징: 기본적으로는 텍스트 항목을 표시하지만, 이미지, 버튼, 사용자 정의 뷰 등 다양한 UI 요소를 바꿀 수 있습니다.
List 사용 예시
해당 예제에 나온 코드를 설명해 보겠습니다.
let items = ["초등학교", " 중학교", "고등학교", "대학교"] : 문자열 배열을 선언하는 역할입니다.
이 배열들은 List에서 각 항목을 표시하는 데 사용됩니다.
var body: some View : UI의 내용을 정의하는 body 속성을 선언하는 역할입니다. 해당 부분이 실제 화면에서 표시되는 UI
요소들을 구성합니다.
List(items, id: \.self) { item in : 스크롤이 가능한 목록을 생성하는 구성 요소 입니다. id: \.self 는 리스트 항목의 고유 식별자를 지정합니다. 각각의 항목이 고유한 값을 가지게 됩니다, 이를 사용하여 식별할 수 있습니다.
Text(item) : 각 항목을 Text 뷰로 표시합니다("초등학교", "중학교".....)
navigationTitle("학력") : 상단화면에 표시되는 타이틀을 설정해 줍니다.
이번에는 해당 리스트에 이미지들을 넣어보겠습니다.
기본적으로 있는 시스템 이미지들을 넣어보겠습니다.
위의 예제처럼 이미지도 넣을 수 있습니다.
form
SwiftUI의 Form은 사용자 입력을 받을 수 있는 폼 UI를 쉽게 구성할 수 있도록 도와주는 뷰입니다.
주로 회원가입같은 데이터 입력을 위한 인터페이스를 만들 때 사용됩니다.
form의 특징으로는
일관성 : Ios 의 디자인 가이드라인에 맞춰 스타일이 적용되기 때문에 , 일관된 사용자경험을 제공합니다.
섹션: 관련 항목들을 그룹화 할 수 있습니다.
아래 코드를 보고 설명해드리겠습니다.
@State private var name: String = ""
@State private var email: String = ""
@State private var password: String = ""
@State 속성을 사용하여 세 개의 변수를 정의합니다.
name: 사용자가 입력한 이름을 저장
email: 사용자가 입력한 이메일 주소 저장
password : 사용자가 입력한 비밀번호를 저장
@State 속성을 사용하면 변수들이 변경될 때 자동으로 업데이드됨
var body: some View {
시각적 요소를 정의하는 부분입니다. 이곳에 UI를 구성합니다.
NavigationView {
네비게이션 컨테이너입니다. 내부에 다른뷰를 포함 가능합니다.
Form {
Form은 사용자 입력을 받을 수 있는 컨테이너 입니다. 내부에 다양한 입력 요소를 포함 가능합니다.
Section(header: Text("회원가입")) {
TextField("이름", text: $name)
.autocapitalization(.words)
TextField("이메일", text: $email)
.keyboardType(.emailAddress)
SecureField("비밀번호", text: $password)
}
Section 은 관련 입력 요소들을 그룹화 하는 역할입니다. header 매개변수를 사용하여 섹션의 제목을 회원가입으로 변경했습니다.
첫번째 TextField는 사용자가 이름을 입력할 수 있습니다.
.autocapitalization을 사용하여 첫글자를 대문자로 변환합니다.
두번째 TextField는 이메일을 입력할 수 있습니다
keyboardType(.emailAddress)를 설정하여 이메일 입력에 적합한 키패드를 표시합니다.
SecureField
비밀번호 입력 필드입니다. 입력한 내용이 가려집니다.