상세페이지

개발환경

iOS 16.0 이상

목표

“iPhone 탐색하기” 페이지의 상세페이지를 구현해봅시다.

사용

Image Label

Gradient

완성 화면

** 미세한 차이가 있을 수 있어요 **

고민해봐요

Q : 상세페이지 상단의 뷰는 어떻게 풀스크린으로 구현해야할까?

https://sarunw.com/posts/how-to-set-screen-background-color-in-swiftui/

⇒ 영상 극 초반 ( 1:30 )

Q : 상세페이지 상단의 뷰에 그림자는 어떻게 넣을까?

⇒ LinerGradient(gradient : ) 영상 중반 ( 7:20 )

코드 맛보기

• 그림자 넣기

import SwiftUI

struct ContentView: View {

    var body: some View {
		   VStack {
            Image(systemName: "hand.draw.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 60)
                .foregroundColor(.white)
            Text("iPhone 탐색하기")
                .offset(x: 5, y: 5)
                .font(.system(size: 22))
                .foregroundColor(.white)
                .padding(.bottom, 5)
        }
        .frame(maxWidth: .infinity, minHeight: 230)
        .listRowBackground(LinearGradient(colors: [.blue, .gray], startPoint: .leading, endPoint: .trailing).mask({
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .black, location: 0.5),
                .init(color: .clear, location: 1)
            ]), startPoint: .top, endPoint: .bottom)
        }))
    }
}