SwiftUIでViewのレイアウトを調整するStackについて調べて見ました

# SwiftUIの3つのView Layout

SwiftUIには3つのレイアウトを調整するStackView的なLayoutが存在する

- HStack (X軸を基準として横並びにViewを並べるレイアウト)
- VStack (Y軸を基準として縦並びにViewを並べるレイアウト)
- ZStack (Z軸を基準として重ねてViewを載せるレイアウト)

発想がAndroidのUIに似ています。

HStackはLinearLayout（Horizontal）のそれに似ていますし、
VStackはLinearLayout（Vertical）に似ています。

ということはSwiftUIはコンポーネントの配置の方法はpaddingやmarginを設定して調整するものだろうと推測できます。

# HStack (X軸を基準として横並びにViewを並べるレイアウト)

```swift:ContentView.swift
struct ContentView : View {
    var body: some View {
        HStack {
            ParentView()
            SubView()
        }
        .frame(width: 400, height: 200, alignment: .center)
            .background(Color.yellow)
    }
}

struct ParentView: View {
    var body: some View {
        Text("ParentView")
            .color(Color.white)
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.red)

    }
}

struct SubView: View {
    var body: some View {
        Text("SubView")
            .color(Color.orange)
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.blue)
    }
}
```

Viewの見え方

<img width="150" alt="スクリーンショット 2019-07-22 23.15.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/fe72a1e6-1c76-5d53-4d0f-5df41ff7dbb0.png">


# VStack (Y軸を基準として縦並びにViewを並べるレイアウト)

```swift:ContentView.swift
struct ContentView : View {
    var body: some View {
        VStack {
            ParentView()
            SubView()
        }
        .frame(width: 400, height: 200, alignment: .center)
            .background(Color.yellow)
    }
}

struct ParentView: View {
    var body: some View {
        Text("ParentView")
            .color(Color.white)
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.red)
        
    }
}

struct SubView: View {
    var body: some View {
        Text("SubView")
            .color(Color.orange)
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.blue)
    }
}
```

Viewの見え方

<img width="150" alt="スクリーンショット 2019-07-22 23.19.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/17aabc2b-7606-6814-a03e-5a1400bf2a0f.png">


# ZStack (Z軸を基準として重ねてViewを載せるレイアウト)

```swift:ContentView.swift
struct ContentView : View {
    var body: some View {
        ZStack {
            ParentView()
            SubView()
        }
        .frame(width: 300, height: 300, alignment: .center)
            .background(Color.yellow)
    }
}

struct ParentView: View {
    var body: some View {
        Text("ParentView")
            .color(Color.white)
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.red)
    }
}

struct SubView: View {
    var body: some View {
        Text("SubView")
            .color(Color.orange)
            .frame(width: 100, height: 100, alignment: .center)
            .background(Color.blue)
    }
}
```

Viewの見え方

<img width="150" alt="スクリーンショット 2019-07-22 23.25.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/12c6e72b-eeb1-67e8-360b-dd89e373c298.png">


# 参考ドキュメント

https://developer.apple.com/documentation/swiftui/view_layout_and_presentation