WooKoo Blog

해당 화면을 그리기 위해서 모델을 구성하고 데이터들을 불러왔다. 모델 구성 struct Product{ let name: String let imageName: String let price: Int let description: String var isFavorite: Bool = false } let productSamples = [ Product(name: "나는야 무화과", imageName: "fig", price: 3100, description: "소화가 잘되고 변비에 좋은 달달한 국내산 무화과에요. 고기와 찰떡궁합!"), Product(name: "유기농 아보카도", imageName: "avocado", price: 2900, description: "미네랄도 풍부하고, 요리 장식과 소스..

해당하는 화면을 만드는 소스이다. struct ProductRow: View { var body: some View { HStack{ //상품 이미지 Image("apple") .resizable() .scaledToFill() .frame(width: 140) .clipped() VStack(alignment: .leading){ //상품명 Text("백설공주 사과") .font(.headline) .fontWeight(.medium) .padding(.bottom, 6) //상품 설명 Text("달콤한 맛이 좋은 과일이 여왕 사과. 독은 없고 꿀만 가득한 가득해요!") .font(.footnote) .foregroundColor(.secondary) Spacer() HStack(spacing: 0){..

앞에서 포스팅 했던 ZStack 말고도 뷰를 겹치는 방법이 여러가지가 있는데 먼저 Overlay를 보도록 하겠다. Rectangle().fill(Color.green).frame(width: 150, height: 150) .overlay( Rectangle().fill(Color.yellow) ) // 뷰 중첩 오버레이, 크기 안정하면 동일해서 겹침 초록색 사각형을 먼저 그린뒤 overlay를 사용하면 덮어씌운다. 따로 크기를 지정하지 않는다면 기존의 뷰와 같은 크기를 만든다. 다른 방법으로는 Background가 있다. Background는 우리가 보통 뒷배경의 색을 바꿀 때 사용했었는데 실제로는 뷰의 하위 계층에 쌓아가는 것이다. Rectangle().fill(Color.green).frame(wi..