[SwiftUI Tutorial] StackViewについて

Apple 公式のSwiftUIチュートリアルを流してみて、気づいたことや「これは便利かも」と思ったことをメモる。

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

StackView

基本的にbodyは一つのViewのみ扱えるので、UIを入れ子にしていく形式になる。

下の例では、VStackとHStackを組み合わせてUIを組み立てている。

Flutterでも同じような作りをしていた記憶。

直感的で浅い理解でもさっと書けてしまう反面、ネストが深くなりやすいので、Viewを個別に切り出すなど工夫をしたほうが良い。

参考までに装飾も色々してみた。

struct ContentView: View {

    var body: some View {

        GeometryReader { geometry in

            VStack {

                HStack {

                    VStack {

                        Text("Hello, World!")

                            .padding(5)

                            .background(Color.blue)

                            .font(.headline)

                        Text("I'm Tom!")

                            .padding(5)

                            .background(Color.green)

                            .font(.subheadline)

                            .rotationEffect(Angle(degrees: -19))

                        Text("This is my First SwiftUI Project")

                            .padding(5)

                            .background(Color.yellow)

                            .font(.subheadline)

                            .rotationEffect(Angle(degrees: 14))

                    }

                    Image("1")

                        .resizable()

                        .aspectRatio(contentMode: .fill)

                        .frame(width: geometry.size.width / 3, height: geometry.size.height / 3)

                        .clipped()

                    }

                    Text("Which you need?")

                        .fontWeight(.bold)

                        .padding()

                        .foregroundColor(Color.red)

                    Picker(selection: .constant(1), label: Text("")) {

                        Text("Yesterday").tag(1)

                        Text("Today").tag(2)

                        Text("Tomorrow").tag(3)

                    }

                        .frame(width: -4.0, height: -1.0)

                }

            }

        }

    }

}