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

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

HStack

HStackは複数のUI部品を水平方向(横)に配置するためのものです。

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

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

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

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

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

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

いろいろ出てくるので

『Embed in HStack』を押しましょう。

こうすることでTextをHStackが囲い込みます。

試しにTextの左横にチェックを置いてみましょう。

Textの上に

Text(“☑︎”)

と記述しましょう。

『☑︎』は『チェック』と打ち込んで変換するだけです。

この状態でプレビューを見てみるとTextの左横にチェックが表示されていますね。

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