参考

Apple公式の以下チュートリアルをやってみました🙌

以降、メモです🖋

メモ

SwiftUI のライフサイクルを持つアプリは App プロトコルに準拠している。

その構造の body プロパティでは1つ以上の scene を返す。scene とは表示コンポーネントを順番に提供するもの。

デフォルトでは、SwiftUI View ファイルは2つの構造を宣言している。

構造	説明
`View` プロトコルに準拠したもの	View の中身やレイアウトを示している
`PreviewProvider` プロトコルに準拠したもの	上記Viewのプレビューを宣言している

modifier で SwiftUI の View をカスタマイズできる。

Text("Turtle Rock")
  .font(.title)  // font modifier
  .padding()     // padding modifier

@State 変数に対して $ を接頭辞としてつけることによって、その State 変数にバインドすることができる。

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)  // region をバインド
  }
}

static mode のプレビューの時は、SwiftUIネイティブの View だけ描画される。

Map View のように SwiftUI ネイティブ以外のビューを描画したい場合は live preview に切り替える。

.frame(width:height:) modifier にて、片方しか引数を渡さなかった場合、渡されなかった方の値は自動的に自身のコンテンツの大きさまで広がる。

以下のMapViewの場合は利用可能な領域まで広がることになる。

VStack {
  MapView()
    .frame(height: 300)  // 横幅が親ビューの大きさまで広がる

  // ...
}

layout view に対して modifier を適用すると、中に含んでいる全ての要素に対してその modifier を適用する。

HStack {
  Text("Joshua Tree National Park")
  Spacer()
  Text("California")
}
.font(.subheadline)           // HStackの中のViewに全て適用される
.foregroundColor(.secondary)  // HStackの中のViewに全て適用される

branch10480’s blog

Topics that I've learned.

SwiftUI Tutorial メモ - 1 -

参考

メモ