どうも、名探偵です！
本日はSwiftUIの基礎である「Stack」の謎を解き明かします。
VStackとは
いきなりですが、VStackについて説明していきます。Vertical Stackの略で。ビューを縦に並べます。
と、説明しただけでは頭の中が？で埋め尽くされると思うので、下に例を出します。
struct ContentView: View { var body: some View { VStack {Text("テスト１")Text("テスト２") } }}
このように文字が縦に並びました。これがVStackです。
HStackとは
次にHStackです。Horizontal Stackの略でビューを横に並べます。
struct ContentView: View { var body: some View { HStack {Text("テスト１")Text("テスト２") } }}
今度は縦ではなく、横に並びました。
ZStackとは
最後にZStackです。Depth Stackの略でビューを同じ位置に上から重ねます。
struct ContentView: View { var body: some View { ZStack {Text("テスト１")Text("テスト２") } }}
このように少し見にくいかもしれないですが重なっていますね。
ZStackは主に画像を重ねたいときに使います。
文字だと訳がわからないので。
実際の使い方
一応は説明しましたが、実際どのように使っているのか知りたいですよね？
実際に私が書いたコードをお見せします。
struct ContentView: View { 省略 var body: some View { NavigationView {VStack { TextField("金額を入力", text: $money) .font(.largeTitle) 省略 Button(action: { 省略 }) { Text("確定").font(.largeTitle) } Toggle(isOn: $trigger) { Text("税込み") 省略 } Text("合計" + " " + "\(total)" + " ") .font(.largeTitle) Spacer().frame(height: 50) NavigationLink(destination: LogView(text: $strlog)){ Text("買い物履歴").font(.largeTitle) }} 省略 } }}
こんな感じです。実際はZStackはあまり使わないような…自分だけかな？
まとめ
SwiftUI の見た目のところ(デザイン)は必ずStackを使うように意識してください。
エラーが起きるので…
またもう少し掘り下げてデザインのところを説明していきたいので、
またよろしくお願いいたします！
