Closed15

Flutter アプリ開発者が SwiftUI に入門する

以下のスクラップの続きです。

https://zenn.dev/heavenosk/scraps/ec40621989b42c

このスクラップでは、SwiftUI に入門します。

方針

  • SwiftUI の公式のチュートリアルをやる
  • 完璧にこなすことを目指さない
    • 内容に関して十分だと思ったら、完了していなくても切り上げる
  • 面白そうな単元があったら優先して取り組む
    • 前提知識が足りなかったら、知識を補うチュートリアルに取り組む
  • 実際にアプリを作りたくなったら、チュートリアルを切り上げる

Creating and Combining Views

Creating and Combining Views

Section 1 - Create a New Project and Explore the Canvas

SwiftUI での開発の基本のキっぽい内容

  • SwiftUI のファイルの基本構成
    • View, PreviewProvider の二つで構成される
  • Canvas View の出し方
  • HotReload を体験

Section 2 - Customize the Text View

テキストの色々な表示方法について。チュートリアルやる人が、スコープが小さいところから開発手法を学んでもらう目的がありそうに感じました。

SwiftUI では XCode の色んな機能を組み合わせて開発することができる

  • コード、インスペクタ、キャンバス,
    • SwiftUI のインスペクタは、キャンバス上で View 要素に対して「Control + Option +クリック」することで表示される

SwiftUI ではドットを繋げて View を編集する。modifier と呼ぶ

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            // .font で font を設定している
            .font(.title)
            .foregroundColor(.green)
    }
}

Section 3 - Combine Views Using Stacks

  • DragAndDrop で Canvas にコンポーネントを入れたりできる。デザインツールみたいな感じでした。
  • Inspector や Canvas からコンポーネントを追加したり編集できるのかなり楽しいです。
    • ソースも同時に編集されるから、⌘ + Z で戻すのも当然動きました。素晴らしい。

Section 4 - Create a Custom Image View

画像を取り込んで表示させて、円形に切り取って縁つけて影つける。やってみたけどすごいばっかり言ってます。

overlay モディファイアはちゃんと後で調べて理解したいです。

Section 5 - Use SwiftUI Views From Other Frameworks

MapKit を使って、地図を追加する項。MapKit が SwiftUI に対応しているから使える、ということなんですかね。

Section 6 - Compose the Detail View

最後の仕上げにこれまでに作ったコンポーネントを組み合わせる単元です。

DONE

感想 & 疑問点

  • このチュートリアルしかやっていないですが、かなり開発環境として満足度高いです。
    • 大規模なアプリは不明
  • 今回のチュートリアルではデバイスサイズが iPhoneX など、縦が長いデバイスだったけど、iPhone8 だとレイアウトが崩れました。
    • constraints や割合指定のレイアウトをどうやるのかが気になります

Building Lists and Navigation

Building Lists and Navigation

この単元で取り組んだこと

  • 一覧表示の方法
  • 詳細ページへの遷移の実装方法
  • Preview を複数立ち上げて、複数端末サイズ対応

Handling User Input

Handling User Input

  • リストの絞り込みの実装
  • お気に入りボタンの実装

List の書き方は複数種類あるようでした。

  • List に直接 array を受け渡す
  • List の trailing closure で ForEach を受け渡す
    • 複数種類のリストを扱うときに役立つようです。

直接 array を受け渡す

List(filteredLandmarks){ landmark in
    NavigationLink(
        destination: LandmarkDetail(landmark: landmark)){
        LandmarkRow(landmark: landmark)
    }
}
.navigationTitle("Landmarks")

List の trailing closure で ForEach を受け渡す

List {
    Toggle(isOn: $showFavoritesOnly){
        Text("Favorites only")
    }
    ForEach(filteredLandmarks){ landmark in
        NavigationLink(
            destination: LandmarkDetail(landmark: landmark)){
            LandmarkRow(landmark: landmark)
        }
    }
}

このスクラップは2021/01/03にクローズされました
ログインするとコメントできます