SwiftUI入門してみた

Hello Worldしてみた

SwiftUI初めて触ったモバイルの技術でした。久しぶりに触ってみたが、よくわからない。

こちらのサイトを見るとコードの意味がなんとなくわかる。
https://yosshiblog.jp/【swiftui】swiftuiの基本形/

今回は、デフォルトのプロジェクトにグラデーションをつけてみました。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Jboy!")
                .font(.system(size: 100))
                .fontWeight(.black)
                .foregroundStyle(
                LinearGradient(
                    colors: [.pink, .purple, .blue], startPoint: .topLeading, endPoint: .bottomTrailing))
        }
        .padding()
    }
}

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

こんな感じになります

コードの解説

Storyboardを使ってたときは、ViewControllerなるものを使って、UIを作ってました。
ドラッグ&ドロップするアレね!
でも、SwiftUIは、struct(構造体)でViewを継承して、UIを作るみたいです。Kotlinも継承するときは、 : をつけますね。
コードシンプルなんだけど、慣れるまでわかりにくい💦

UIを作るコードは、bodyの中に書く。

struct ContentView: View {
    var body: some View {
       
    }
}

今回だと、テキストにグラデーションをつけたいので、LinearGradientなるものを使う。
https://yosshiblog.jp/swiftui_gradient/

Text("Jboy!")
                .font(.system(size: 100))
                .fontWeight(.black)
                .foregroundStyle(
                LinearGradient(
                    colors: [.pink, .purple, .blue], startPoint: .topLeading, endPoint: .bottomTrailing))
        }
        .padding()

ContentView_Previewsを使えば、Jetpack Composeみたいに、プレビューしたUIを表示することができる。これは、ホットリロードが効いてるみたいです。

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

要素を縦に並べてみる

SwiftUIには、VStackというFlutterやJetpack ComposeのColumnと同じようなものがあります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Jboy.dart")
                    .foregroundColor(.black)
                Image(systemName: "applelogo")
                Text("こんにちわ")
            }
        }
    }
}

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

Stateの管理

FlutterのsetStateみたいに、状態の管理ができるものがある。それが、@Stateなるものです。こんな感じでカウンターアプリを作る。

import SwiftUI

struct ContentView: View {
    
    @State var countValue = 0
    
    var body: some View {
        NavigationView {
            VStack {
                Text("\(countValue)個だよ")
                Button("増やす") {
                    countValue += 1
                }
                .foregroundColor(.white)
                .buttonStyle(.borderedProminent)
                .tint(.black)
            }
        }
    }
}

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

やってみた感想

Flutterのように、宣言的UIだから、コードを書けば直感的にUIが作れる。UIKitより学習コストが低い。
新機能は、SwiftUIで作られているらしい？

SwiftUIは使いやすそうで、よくないところがあるらしくて、それが....

• Previewがよく壊れる.
• UIKitでできることが全部できるわけではないらしい？
• OS毎に挙動が違う時があるとか？

こちらの動画がとてもわかりやすかったです。
https://www.youtube.com/watch?v=IaGnIjAcRJM