VStack,HStack,ZStack

Swift

ContentView

import SwiftUI

struct ContentView: View {
    @State var str = "HELLO WORLD"
    @State var inputText = ""
    @State var isOn = true
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large) <--- これらのプロパティを「モディファイア」といいます
                .foregroundColor(.accentColor) <--- 文字色
            Text(str)
                .padding()
                .background(Color.red)
            Text(str) <--- 背景色を塗ってから余白をつけるので、上のTextと違う感じになります
                .background(Color.red)
                .padding()
            Button("ボタン") {
                str = "HELLO SWIFTUI"
                print("BUTTON CLICKED")
            }
            Rectangle()
                .foregroundColor(.blue) <--- 背景色
                .foregroundColor(.red) <--- 同じモディファイアを2回以上設定すると上が優先されます
                .frame(width: 300, height: 50) <--- サイズ
                .cornerRadius(10) <--- 角丸
                .shadow(radius: 10) <--- 影
            List {
                Text("りんご")
                Text("スイカ")
                Text("みかん")
            }
            TextField("ここに文字を入力してください", text: $inputText)
            Toggle("スイッチ", isOn: $isOn)
        }
        .padding()
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

VStack { } … Vertical Stack 縦に並べる

HStack { } … Horizontal Stack横並びに並べる

ZStack { } … Z軸上に重ねて並べる

BACK