SwiftUI を試してみたのでメモ

• 概要
• 環境
• 感想
• ContentView.swift
• CircleImage.swift
• MapView.swift

概要

SwiftUI のチュートリアルの1章を試してみたの成果物と感じたことをメモしておきます

環境

• macOS 11.6.5
• Xcode 13.1

感想

• 開発は Vue や React のように宣言的に行える (状態が変わると自動で描画し直すなど)
• コンポーネントごとに SwiftUI ファイルを作成できる
• Stack を使いこなせるといい UI ができそう
• 既存の UIKit から SwiftUI へのコンバートは頑張ればできるみたい
• ライブプレビューは便利だがある程度スペックのあるマシンでないと重くなる

以下成果物です

ContentView.swift

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("現在地").font(.title)
                HStack {
                    Text("詳細1")
                    Spacer()
                    Text("詳細2")
                }.font(.subheadline).foregroundColor(.secondary)
                Divider()
                Text("現在地について").font(.title2)
                Text("説明")
            }.padding()
            Spacer()
        }
    }
}

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

CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("test").resizable().frame(width: 150, height: 150).clipShape(Circle()).overlay(Circle().stroke(Color.white, lineWidth: 4)).shadow(radius: 7)
    }
}

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

MapView.swift

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.6834875, longitude: 139.7608643), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

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