SwiftUI  モディファイア一覧

## SwiftUIとは
iOS開発のフレームワークのことです。
ちなみにUIKitもフレームワークです。
どちらもUIフレームワークと呼ばれています。UIというのは、見た目のことなので、
SwiftUIはiOSアプリを見た目を作るためのプログラムということになります。


## モディファイヤとは
Viewの見た目や機能を変えるためのプログラムです

## モディファイア一覧

### テキストの色を変える

```
Text("Hello, world!!!")
    .foregroundColor(.green) 
// .greenの部分を.red .blueなどと指定するとHello, world!!!の色が変わります

```



        



![スクリーンショット 2024-04-10 21.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/af146f73-6576-267f-0a80-08c7221701b2.png)


---
### リストを作ってみる


```
List {
    Text("りんご")
        .padding()
    Text("レモン")
        .padding()
    Text("オレンジ")
        .padding()
}
```

![スクリーンショット 2024-04-11 0.28.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/54d769b9-cbb4-c490-008a-e8240d249e86.png)

---

### ナビタイトルを作ってみる

```
NavigationStack {
    Text("Hello")
        .navigationTitle(Text("ナビタイトル"))
}
```

![スクリーンショット 2024-04-11 0.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/21c02365-b793-19d9-a83f-1afd2a8328ae.png)


---

### ツールバーを作ってみる


ツールバーとは検索ボタンや戻るボタンのことです。

```
NavigationStack {
    Text("Hello")
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
            // 位置指定をしています。
               左寄せ：navigationBarLeading
               右寄せ：navigationBarTrailing
                Text("戻る")
            }
        }

```


![スクリーンショット 2024-04-11 0.56.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/3154eddd-201c-aea6-42dd-d89060042d1a.png)


---

### HStackを使ってみる


複数のViewを水平方向（横）に配置するためのモディファイア

```
HStack {
    Text("ああああ")
    Text("いいいい")
    Text("うううう")
}
```

![スクリーンショット 2024-04-11 1.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/395cd6a5-3839-dfbe-b514-03b7a551a0ec.png)


---

### VStackを使ってみる



複数のViewを垂直方向（縦）に配置するためのモディファイア


```
VStack {
    Text("ああああ")
        .padding()
    Text("いいいい")
        .padding()
    Text("うううう")
        .padding()
}
```


![スクリーンショット 2024-04-11 1.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/2aac0ded-7891-9007-981a-86c930dbb066.png)


---

### fontを使ってみる


文字を大きさを制御するためのモディファイア


サイズ大
largetitle
title
headline
body
callout
fontnote
caption
サイズ小

```
List {
    Text("ああああ")
        .padding()
        .font(.largeTitle)
    Text("ああああ")
        .padding()
        .font(.title)
    Text("ああああ")
        .padding()
        .font(.headline)
    Text("ああああ")
        .padding()
        .font(.body)
    Text("ああああ")
        .padding()
        .font(.callout)
    Text("ああああ")
        .padding()
        .font(.subheadline)
    Text("ああああ")
        .padding()
        .font(.footnote)
    Text("ああああ")
        .padding()
        .font(.caption)
}

```

![スクリーンショット 2024-04-11 1.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/64d5149d-1d7a-8366-70b8-bcc005dfa204.png)


---

### Buttonを使ってみる


実際にボタンを押して、printの中身の"ボタンが押されました"を出力させるためには、シュミレーターか実機でのビルドが必要です。



```
import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: Report) {
            /*@START_MENU_TOKEN@*/Text("Button")/*@END_MENU_TOKEN@*/
        }
    }
}
func Report() {
    print("ボタンが押されました")
}


```
![スクリーンショット 2024-04-12 20.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/2485de48-840d-c236-4528-d06fff9ea575.png)

---

### ForEachを使ってみる


ForEachとはUIパーツを繰り返し生成させるためのモディファイアです。

```
import SwiftUI

// ForEachを利用するためには、構造体をIdentifiableプロトコルに適応させる必要があります

struct Human: Identifiable {
    // Identifiableプロトコルが適応された構造体はidというプロパティが必須
    // UUIDとは適当なIDを生成する関数
    let id = UUID()
    let name: String
}

struct ArrayContentView: View {
    let humans = [
        Human(name: "田中"),
        Human(name: "鈴木"),
        Human(name: "佐藤")
    ]
    var body: some View {
        List {
// ForEachはListやVStackなど複数のUIパーツを配置できるもの中からしか利用できない。
            ForEach(humans) { human in
                Text("\(human.name)さん、こんにちは！")
                Text(human.id.description)
// TextはStringを引数にとります。human.idはUUID型なので.descriptionとすることでString型にしています。
            }
        }
    }
}

```

![スクリーンショット 2024-04-13 0.11.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/472e6681-23d0-6562-e560-70bc9571d977.png)


---

### @Stateを使ってみる

@Stateは構造体の中で、値を変更したいプロパティに付与する

```
    @State var lastName = "里見"
    var firstName = "太郎"

```
lastNameは変更可能 。firstNameは変更不可
firstNameを変更しようとするコードを書くと
``` Cannot assign to property: 'self' is immutable```
というエラーが出ます！


![スクリーンショット 2024-04-13 15.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/a0b2854d-9099-231f-f49b-d407208e3aad.png)


---

### @ObservableObjectを使ってみる

@Stateは構造体の中で、値を変更したいプロパティに付与していましたが、@ObservableObjectはインスタンス版です。
@ObservableObjectが付いたインスタンスのプロパティに値変化があった時、Viewが更新されます。

ルール
- インスタンスの基となるクラスはObservableObjectプロトコル準拠
- 値変更したいプロパティは@Publishedを付ける
- @ObservableObject var 変数名 = クラス名()

```
class UserData: ObservableObject {
    @Published var name: String
    @Published var age: Int
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

@ObservedObject var userData = UserData(name: "鈴木", age: 20)


```


![スクリーンショット 2024-04-13 17.26.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325154/d3e5fa6a-8d70-cafd-3b62-cb9265d493e1.png)

---

### @EnvironmentObjectとは

ObservableObjectを複数のViewで共通プロパティとして使えるようにしたもの

ルール
- インスタンスの基となるクラスはObservableObjectプロトコル準拠
- 値変更したいプロパティは@Publishedを付ける
- @EnvironmentObject var 変数名: クラス名
- Appを準拠したクラスの中で ```ContentView().environmentObject(クラス名()) ```と記述する