[SwiftUI] HStackの配置、余白、背景色等の設定

HStackを使ってレイアウトをする上で、alignmet、spacing、backgroundの背景色等はどのように設定するのか確認してみます。

Xcode 13.4.1

 

HStack

 
HStackなどStackには他にVStack、ZSTackやLazyVStack、LazyHStackがありました。
 

複数のアイテムを設定するために、VStack、HStack、ZStackを使ってレイアウトできます。 またLazyVStack, La...

 
ここでは特にHStackについて細かく設定を確認します。
 

目次
1. alignment
 1.1 top
 1.2 center
 1.3 bottom
 1.4 firstTextBaseline
 1.5 lastTextBaseline
2. spacing
3. Spacer()
4. background
5. frame
6. Divider
 

alignment

 
alignment は垂直方向に上・中央・下に寄せるベースラインを揃える操作になります。

 

top


1行の文字列では垂直方向の位置がわかりにくいので片方の文字を多くして行数を増やしました。HStackの文字列が上寄せになったのがわかります。
(青い矩形枠はStackを選択した場合に領域を表示してくれるもので、実際は枠はありません。またpadding()が追加されているのでそのまま使っていますが外す事も可能です。)

 

center


 

bottom


 

firstTextBaseline

firstTextBaseline は top との違いがわかりにくいのですが、例えばpadding()を外して比較するとわかります。


padding()による上下左右の余白が無くなるとtopでは余白分揃わなくなります。


 
firstTextBaselineに変更、


ベースラインが揃っているのがわかります。

 

lastTextBaseline

firstTextBaselineと同様にpadding()を外すと余白分のズレが発生します。


ズレが生じています。

 
lastTextBaselineに変えてみます。


最終行が揃いました。

 

spacing

 
水平方向のView間の余白をCGFloatで指定します。
 



 
Text() に付随するpadding()が別の余白を形成しているので外してみます。


尚、padding() は上下左右に細かく設定することも可能です。
 
また、マイナスの設定もでき、上下の位置が逆転します。


 

Spacer()

 
Spacer()を使うと左寄せや右寄せが可能となります。
例えば、”HStack” を左寄せするには、


これは、画面サイズを計算せずに左右に寄せてレイアウトしたい場合などに役立つかもしれません。


 

background

 
HStack内のView領域を背景色で色付けしてみましょう。



 
Color.yellow で黄色を指定しましたが、他の固定色は以下です。

  • Color.black
  • Color.blue
  • Color.gray
  • Color.green
  • Color.orange
  • Color.pink
  • Color.red
  • Color.white
  • Color.yellow
 

frame

 
HStackの領域をframeを使って限定してみます。


これを使ってHStackを使うとこうなります。


 
またframeをSafe Areaまで広げることもできます。


 

Divider

 
HStackを分割するラインを Diver() を使って引くことができます。


 

細い線ですが分割されています。

残念ながらDivider()では太さを調整できないので
frameで細長い矩形を代用するなど他の方法を使います。

 

References:
init(alignment:spacing:content:)
HStack | Apple Developer Documentation
VerticalAlignment | Apple Developer Documentation
padding(_:) | Apple Developer Documentation
Spacer | Apple Developer Documentation
Color | Apple Developer Documentation
frame(width:height:alignment:) | Apple Developer
Divider | Apple Developer Documentation


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする