Help us understand the problem. What is going on with this article?

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を並べるレイアウト)

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の見え方

スクリーンショット 2019-07-22 23.15.44.png

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

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の見え方

スクリーンショット 2019-07-22 23.19.10.png

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

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の見え方

スクリーンショット 2019-07-22 23.25.57.png

参考ドキュメント

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした