【SwiftUI入門】VStackを使ってみよう

2020年7月30日2021年1月29日

VStack

VStackは複数のUI部品を垂直方向(縦)に配置するためのものです。

VStack {     UI部品1    UI部品2    …}

といったようにVStack中に垂直方向に配置したいUI部品を複数記述して使います。

実際に使ってみましょう。

適当にSwiftUIのプロジェクトを作成してください。

記述されている『Text(“Hello, World”)』にVStackを追加しましょう。

『command(⌘)』キーを押しながらTextをクリックしましょう。

一覧が出てくるので、『Embed in VStack』を押しましょう。

するとVStackが追加されます。

VStackを追加したことで垂直方向(縦)にUI部品を追加することができるようになりました。

適当にTextを追加して確かめてみましょう。

Text(“Hello, SwiftUI”) Text(“Hello, Swift”)

と記述します。

この状態でプレビューを見てみましょう。

垂直方向にTextが追加されていますね。

このようにHStackを使えば複数のUI部品を水平方向(横)に配置することができます。