SwiftUIのはじめかた。　View 画面

2022年2月14日 06:10

コードを書いていく場所

見た目を決めるコードを書いていく場所ですが

protocol View

これを使って構成されています。具体的にはXcodeで新規でプロジェクトを作った時にできる

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

です。

var body: some View {
　　ここに画面に使う部品を入れていきます
}

画面作りに必要な部品について。

多く使われるのはやっぱり文字ではないでしょうか。文字によって操作、見た目がだいぶ変わってくるように思います。

Text Input and Output

文字の表示

@frozen struct Text

と定義されている構造体です。使い方は

Text("Hello")

そして文字をいろいろ修飾できるモディファイア。

.font(.title)

これは文字を大きくします。

Images

画像の表示

@frozen struct Image

  Image(systemName: "play.rectangle.fill")

画像はSF Symbolsを使っています。そしてモディファイア

  .font(.largeTitle)

これは大きさを変化させます。

画面に表示させるものをレイアウトするための部品として

Layout Containers

VStackの使い方　・・・　縦並び

@frozen struct VStack<Content> where Content : View

と定義され、

var body: some View {
    VStack(
        alignment: .leading,
        spacing: 10
    ) {
        ForEach(
            1...3,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

を実行すると

Item1
Item2
Item3

と縦に並びます。

HStackの使い方　・・・　横並び

@frozen struct HStack<Content> where Content : View

と宣言され、

var body: some View {
    HStack(
        alignment: .top,
        spacing: 10
    ) {
        ForEach(
            1...5,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

とすると横一列に

Item1 Item2 Item3 Item4 Item15

と表示されます。

ZStackの使い方　・・・　重なった表示

@frozen struct ZStack<Content> where Content : View

と宣言されていて

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]


var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}

実行すると重なりを持った四角が表示されます。

Collection Containers

画面にリスト表示ができるようになります。上から順番に表示することができます。

List

struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View

と宣言されていて使うのは簡単、

var body: some View {
    List {
        Text("A List Item")
        Text("A Second List Item")
        Text("A Third List Item")
    }
}

List { ここに表示したいものを書く}

と書くだけでリストができます。

Presentation Containers

タブで画面を使い分けることができるようになります。

TabView

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View