Chikong

Tabview

• Tab을 만들어 각각의 view 마다 다른 화면을 보여주는것

Tabview {
	View()
		.tabItem {
		//- tabItem 의 내용 이미지, 이름 등을 설정
	}
}

• tabItem에는 Label , Text, Image 만 허용하고, Button 과 같은 컴포넌트가 포함되면 해당 뷰는 빈 페이지로 로드

Data

• Model 개념의 구조체로 데이터의 ‘청사진' 을 구성

struct Info {
    let image: String
    let name: String
    let story: String
    let hobbies: [String]
    let foods: [String]
    let colors: [Color]
    let funFacts: [String]
}

• 해당 데이터의 모델 구성하면, 앱의 전반적인 곳에서 해당 모델을 사용할 수 있음

let information = Info(
    image: "Placeholder",
    name: "My Name",
    story: "A story can be about anything you can dream up. There are no right answers, there is no one else.\\n\\nNeed some inspiration?\\n• 🐶🐱🛶️🎭🎤🎧🎸\\n• 🏄‍♀️🚵‍♀️🚴‍♀️⛵️🥾🏂⛷📚\\n• ✍️🥖☕️🏋️‍♂️🚲🧗‍♀️ ",
    hobbies: ["bicycle", "ticket.fill", "book.fill"],
    foods: ["🥐", "🌮", "🍣"],
    colors: [Color.blue, Color.purple, Color.pink],
    funFacts: [
        "The femur is the longest and largest bone in the human body.",
        "The moon is 238,900 miles away.",
        "Prince’s last name was Nelson.",
        "503 new species were discovered in 2020.",
        "Ice is 9 percent less dense than liquid water.",
        "You can spell every number up to 1,000 without using the letter A.\\n\\n...one, two, three, four...ninety-nine...nine hundred ninety-nine 🧐",
        "A collection of hippos is called a bloat.",
        "White sand beaches are made of parrotfish poop.",
    ]
)

View 의 구성

• VStack 은 컴포넌트 들을 수직으로 정렬
• Text 를 사용해서 글을 표시할수 있으며 .font / .fontWeight 등의 옵션으로 글을 커스텀 할수 있음
• padding 을 사용하여 다른 뷰와의 거리를 띄울수 있음
• Image 를 사용해서 이미지를 추가 할수 있다
  • .resizable() 을 사용하여 이미지의 크기를 조절 할 수 있다
  • .aspectRatio(contentMode: .fit) 을 사용하여 이미지의 종횡비를 지정할 수 있다.
  • .cornerRadius() 를 사용하면 이미지의 모서리를 둥글게 할수 있다.

Imgae("이미지 내용")

• ScrollView
  • ScrollView 를 구성 하려면 ScrollView { ... } 로 감싸면 된다 

ScrollView { Text(information.story) .font(.body) .padding() }

• HStack 은 컴포넌트 들을 수평 으로 정렬
• ForEach 구문을 사용하여 뷰를 구성할 수 있다.
  • id: \.self 를 통해 고유 값을 설정한다 ( 인덱스의 개념! )

ForEach(information.hobbies, id: \\.self) { hobby in 
	Image(systemName: hobby) 
    	.resizable() 
        .frame(maxWidth: 80, maxHeight: 60) 
}

• @State 를 사용하면 내용이 바뀔때마다 view 를 새로 그린다
• Button 클로저 아래에 여러 설정값으로 버튼의 모양을 변경할 수 있다

Button("Show Random Fact") { 
	funFact = information.funFacts.randomElement()! 
    } 
    .padding() 
    .background(Color.cyan) 
    .cornerRadius(20)