[SwiftUI] - 기본 뷰 구성하기 및 ProductRow 추출

 

해당하는 화면을 만드는 소스이다.

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){
                    //가격정보와 버튼
                    Text("$")
                        .font(.footnote)
                        + Text("2100").font(.headline)
                    
                    Spacer()
                    
                    Image(systemName: "heart")
                        .imageScale(.large)
                        .foregroundColor(Color("peach"))
                        .frame(width: 32, height: 32)
                    
                    Image(systemName: "cart")
                        .foregroundColor(Color("peach"))
                        .frame(width: 32, height: 32)
                    
                }
                .padding([.leading, .bottom], 12)
                .padding([.top, .trailing])
            }
            
        }.frame(height: 150)
        .background(Color.primary.colorInvert())
        .cornerRadius(6)
        .shadow(color: Color.primary.opacity(0.33), radius: 1, x: 2, y: 2)
        .padding(.vertical, 8)
    }
}

이렇게만해도 소스가 엄청 커져버리므로 해당 소스를 추출해서 따로 파일로 만들어주고

이런식으로 불러와서 사용한다.

추출하고 싶은 부분을

커맨드 키를 이용해서 추출할 수도 있다.

Extract를 사용하면된다.

 

 

---

출처 Sweet한 swiftUI