SwiftUI

最終更新日: 2026-07-26

TOP(About this memo)) > 一覧(Swift) > SwiftUI

SwiftUI

Viewプロトコル

よく使うもの

Image
    Image("turtlerock").clipShape(Circle()).overlay { Circle().stroke(.gray, lineWidth: 4) }.shadow(radius: 7)
Text
VStack
HStack
Spacer

modifier

.frame(height: 300)
.padding(.bottom, -130)
.foregroundColor(.green)
.font(.subheadline)

ForEach

struct ContentView: View {
    let animals = ["カピバラ", "アルパカ", "トナカイ", "アルマジロ"]
    var body: some View {
        Form {
            ForEach(0..<animals.count) { num in
                Text(self.animals[num])
            }
        }
    }
}

SwiftUIのコード

描画処理

SwiftUIの省略記法の解説

var body: some View {
    VStack {
        Text("Turtle Rock").font(.title)
        Text("Text").font(.subheadline)
    }
}

これは、下記と同義。

var body: VStack<TupleView<(Text, Text)>> = VStack<TupleView<(Text, Text)>>(
    content: { () -> TupleView<(Text, Text)> in
        return ViewBuilder.buildBlock(
            Text("Turtle Rock").font(.title),
            Text("Text").font(.subheadline)
        )
    }
)

解説

まず、SwiftUIのように次々とViewを継ぎ足していくたびに、VStack<TupleView<(Text, Text)>>のような型指定を変更するのは苦行になってくる。 それをsomeを使って省略する。

var body: some View {
    VStack(
        content: { () -> TupleView<(Text, Text)> in
            return ViewBuilder.buildBlock(
                Text("Turtle Rock").font(.title),
                Text("Text").font(.subheadline)
            )
        }
    )
}

まずは、省略記法（トレーリングクロージャ）を使う。

var body: some View {
    VStack {
        ViewBuilder.buildBlock(
            Text("Turtle Rock").font(.title),
            Text("Text").font(.subheadline)
        )
    }
}

そして、SwiftUIではresultBuilderというSwiftの機能が使われていて、contentで指定した内容を変換してくれるので、下記のように省略して指定することができる。

var body: some View {
    VStack {
        Text("Turtle Rock").font(.title)
        Text("Text").font(.subheadline)
    }
}

Grid

ナビゲーション

TabViewとNavigationStackを組み合わせる

This site is open source. Improve this page.