[SwiftUI] Apple Tutorials

생성한 App 구조체

import SwiftUI

@main
struct LandMarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

1. @Main → 구조체 선언 앞에 @main 특성을 붙여 앱의 진입점을 나타냅니다. 앱은 하나의 진입점만 가집니다.
2. App protocol: 앱의 구조와 동작을 나타내는 유형입니다.

→ 앱 시작시 ContentView를 띄우겠다는 의미

 

 

 

ContentView

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

MapView

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011, longitude: -116.166),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

 

1. @State - 뷰를 업데이트할 수 있는 변수

2. 변수앞에 $ 지정하면,@State 변수가 업데이트될 때 마다 바인딩

 

 

 

Image 넣고 ContentMode 적용하는 방법

 

순서가 중요

1. resizeable() - 화면 크기에 맞추어 채워줌
2. aspectRatio(contentMode: .fit) - frame 이전에 contentMode적용
3. 이후 frame 크기 맞춰주기
4. .frame(width: 200, height: 230)그다음 clip to bouns 적용 .clipShape(Circle()) 또는 .clipShape(RoundedRectangle(cornerSize: .init(width: 40, height: 40)))

 

import SwiftUI

struct CircleImage: View {
    var body: some View {
        VStack {
            Image("test")
                .aspectRatio(contentMode: .fill)
                .frame(width: 200, height: 200)
                .clipShape(Circle())
                .overlay {
                    Circle().stroke(.white, lineWidth: 3)
                }
                .shadow(radius: 5)
        }
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

 

 

List 만들기

 

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarks, id: \.id) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

 

+ Data 구조체에 Hashable 프로토콜 추가

 

import Foundation
import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String

    private var imageName: String
    var image: Image {
        Image(imageName)
    }

    private var coordinates: Coordinates
    var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }

    struct Coordinates: Hashable, Codable {
        var latitude: Double
        var longitude: Double
    }
}

 

 

List 만들기2 (더 간결하게)

 

import Foundation
import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String
...
}

 

Identifiable 프로토콜 추가하면

 

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarks) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

 

이런식으로 id: \.id 없이 간결하게 처리 가능