Swift 23 SwiftUI例題チュートリアル 

今度の章にはSwiftUI基盤の例題フロジェクト設計するし実行ながら今まで学習することを復習してみよう。
今度の章の目標は`:ビュー{}`、`.修正者`、`@ステート`そして幾つの基本的なアニメイション技術を使用して相互作用する簡単な使用者インタフェイスを設計する時Xcodeはどうやって使用するかを調べることである。
![Screenshot 2023-11-13 at 11.17.06 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/e4ae3fec-c25a-49ef-9966-c71a3c90e0b5.png)
![Screenshot 2023-11-13 at 11.21.19 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/bd2ce220-e8ec-d131-10d0-a6f7bbe07485.png)
# 23.1 `レイアウトvhz`修正する
現在`:ビュー{body}`はImageとTextを含まれるVStackで構成されます。
![Screenshot 2023-11-13 at 11.43.58 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/3d8d24d2-4049-f40b-7f35-bdcce128001e.png)

# 23.2`@ステート`プロパティ追加する

![Screenshot 2023-11-13 at 2.19.28 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/750ad846-8e2e-11e2-379d-6b2c16b04e05.png)
SliderはTextビューを回転させる総量を制御する為に使用するつもりです。つまり、Sliderビューと現在回転値を保存される`@ステート`間のバインディングが構築するべきです。
バインディングされる様に宣言するので「$」を前に貼ることです

# 23.3 Textビューで`.修正者`追加する
![Screenshot 2023-11-13 at 2.43.20 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/571291f2-f047-436b-e44b-79d8a85d2d40.png)

# 23.4 回転とアニメイション追加する
![Screenshot 2023-11-13 at 3.12.10 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/1b730db6-0ac1-f66b-126b-f4998660c857.png)

# 23.5 スタックでTextField追加する
使用者が入力する・テキストがTextビューで表示されることもできます。
TextFieldビューを追加してこれを為に`Viewストラクト`で直接に入力するとか、`ライブラリパパネル`利用します。
![Screenshot 2023-11-13 at 3.37.35 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/205df801-2e1a-fbb4-c613-02ce8d14e6e9.png)

# 23.6 色ピッカーを追加する
スタックについする最後のビューは`Pickerビュー`です。これは`forground color`を使用者がユーザーが選べられる様にすることです。まず、色相名前と配列及び`Colorオブジェクト`配列インタフェイス値を保存する為に`@ステート`プロパティを追加します。
```swift
 var colors: [Color] = [.black, . red, .green, .blue]
    var colornames = ["Black", "Red", "Green","Blue"]
    
    @State private var colorIndex = 0
    @State private var rotation: Double = 0
    @State private var text: String = "Welcom to SwiftUI"
```
変数を構成したからライブラリパパネルを開けてPickerを探してTextFieldの下で入れてしはしょう
![Screenshot 2023-11-13 at 4.05.13 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/8d0ae47d-dee4-a098-095f-f3becc6b6862.png)
この`Pickerビュー`はcolorIndex`@ステート`プロパティで現在選択されたものを保存し、coloarNames配列であるそれぞれの色相名前を表示される様に構成するべきです。`Pickerビュー`がもっと見られる為に色相名前を表示するテキスト色相がcolors配列である該当色相に変えてくれるだろう。

colorNames配列を反複雑するコードは ForEachを使用します。一見するとforEachはまた別のSwiftプログラミング言語制御フロー(For... while..., If... etc)のように見えます。実は**配列メソードのforEach()とは違います**。

ForEachはそのまま配列とか範囲みたいなデータセットを反服して繰り返して**複数のビューを生成する様に特別に設計されたSwiftUIビュー**構造です。
多様な方法で色相選択を表示される様に`Pickerビュー`を構成することもできます。このプロジェクトの場合はpickerSytle()`.修正者`を通じてWheelPickerStyle(.wheel)スタイルを選択するべきです。**コードエディタでPickerビューの宣言部を修正**します。

```swift
 Picker(selection: $colorIndex, label: Text("Color")) {
                ForEach(0 ..< colornames.count, id:\.self){ color in  Text(colornames[color])
                        .foregroundColor(colors[color])
                }
            }
            .pickerStyle(.wheel)
```
前の実装でForEachは `colorNames[Array]`の要素を反服して各色相に対する`Textビュー`を生成してこれを連れて各ビューで表示されたテキストと背景色を設定するに使用されます。

前の例題で ForEach ループは**くクロージャー表現式で含まれています**。これは省略形引数名を使用して単純化ができます。こと技術を使用してPicker宣言を修正します。
```swift
 Picker(selection: $colorIndex, label: Text("Color")) {
                ForEach(0 ..< colornames.count, id:\.self){   
                Text(colornames[$0])
                .foregroundColor(colors[$0])
                }
```
コードエディタでTextビューを探して現在のPickerビューで選択された値でforeground色相をせってするにforegroundColor `.修正者`を追加しましょう。![Screenshot 2023-11-13 at 5.26.07 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/dea078ec-4ac2-8798-7912-7aacfea39ae7.png)
# 23.7 　`レイアウトvhz`整理する 
Slider, TextField, Picker ビュー周辺で余白を追加してデバイス画面端にあまり近づけないようにすることである。それでpadding()を使います。
![Screenshot 2023-11-13 at 5.31.17 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/c0faacd1-f3d7-a82e-f72b-4eba51ea37ce.png)
次は、ビューたちの**間隔が均等であれば**`レイアウトvhz`がより良く見えるだろうこれを実装する一つの方法はTextビュー前後にSapcerビューを追加することです。![Screenshot 2023-11-13 at 5.43.18 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/a5b4a7fc-9fc3-8b84-fe0a-5b3014e7c110.png)
此れはビュー間に可変的な空間を提供するので`レイアウトvhz`の必要によってビューが拡張されたり縮小されることもあるだろう。**Spacerビューがスタくで含まれた場合にはスタックの軸方向に大きさが調整**されるだろう。*もしSpacerビューがスタックコンテナ外で使用される場合には垂直、水平にサイズを調整*することができます。

TextビューとSliderビューの間をより明確に分離するためには`Dividerビューを` `レイアウトvhz`で追加します。
![Screenshot 2023-11-13 at 5.55.53 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/1c7becaa-1e17-de6c-7e38-143cf2eb24f6.png)
するとスタックコンテナ中の二つのビューが分離されることをあらわれるラインを引きます。

# 要約
`レイアウトvhz`でビューを追加する多様な方法と`@ステート`プロパティバインディングと修正者使用まで解説しました。今度の章には SpacerとDividerを紹介するし、`データ[配列]`から動的にビューを生成するためにForEachをどうやって使用するかを見てみました。