SwiftUI 튜토리얼

초보자에게는 이쪽이 어쨌든 추천입니다.

랜드마크 앱을 실천 형식으로 구현할 수 있습니다.
목록 가져오기, 세부정보 페이지로의 전환, 지도 표시, 탭 탐색, 사용자 입력 등 앱에 필요한 메소드가 꽉 찼습니다.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 쓰리 야 ls / 슈 f 츠 /

환경

Xcode 11

MacOS 15 이상 ※2021년 2월 현재
※ Mac 및 Xcode는 자주 업데이트되므로 항상 공식 페이지를 참조하십시오.

프로젝트 작성이나 신규 swift 파일 작성 등 Xcode의 사용법은 설명하지 않습니다.
공식 튜토리얼을보십시오.

시작하기

①View
여기에 UI를 구성합니다.
ContentView는 처음에 표시되는 화면
②Preview
미리 보기 위한 코드. 이쪽을 넣어두면 단말이나 시뮬레이터를 작동시키지 않아도 컴파일하여 그려준다.

import SwiftUI

// ①View
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

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

VStack 세로로 그룹화하려는 경우 사용
HStack 옆에 그룹화하려는 경우 사용
ZStack 겹쳐서 표시하고 싶은 경우에 사용
Text("") 텍스트 표시
Spacer() 공백 넣기
Divider() 테두리 넣기

스타일 추가
.font() 폰트 지정
.foregroundColor() 팬트 컬러
.padding() 패딩 넣기

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

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

이미지 삽입

Assets.xcassets 폴더를 열어 임의의 이미지를 드래그 앤 드롭

이미지("")

스타일 추가
.clipShape(Circle()) 마스크 붙이기 ( Circle() 에서 원에 클립)
.overlay View 위에 View를 겹쳐서 표시
.stroke 테두리 붙이기
.shadow 그림자를 붙인다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 7)
    }
}

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

지도 표시

을 사용하여 View 값을 변경할 수 있게 함으로써 경도와 위도를 지정하여 그릴 수 있다.

MapKit 모듈 가져오기
import MapKit

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        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()
    }
}

Image와 Map을 ContentView에 표시

SwiftUI에서는 CircleImage(), MapView() 라고 쓰면 다른 View에서도 표시시킬 수 있습니다

.ignoresSafeArea 세이프 에리어를 화면상 가득할 때까지 지정
.frame(height: 300) 높이 지정
.offset(y: -130) 객체 이동

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 追加
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            // ここまで追加
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

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

궁극적으로 이러한 표시되면 성공입니다!
htps //w w. 이제 t. jp/bぉg/2381/

Reference

이 문제에 관하여([SwiftUI 입문] 공식 튜토리얼을 정리해 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dai_designing/items/b7bee2a3aea2232acbb3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[SwiftUI 입문] 공식 튜토리얼을 정리해 보았다