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

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

Xcode 13.4.1

 

VStack

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

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

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

目次
1. alignment
 1.1 center
 1.2 leading
 1.3 trailing
2. spacing
3. Spacer()
4. background
5. frame
6. Divider
 

alignment

 
alignment は水平方向に左・右・中央に寄せる操作になります。

 

center


(青い矩形枠はVStackを選択した場合に領域を表示してくれるもので、実際は枠はありません。またpadding()が追加されているのでそのまま使っていますが外す事も可能です。)

 

leading


 

trailing


 

spacing

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



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


尚、padding() は上下左右に細かく設定することも可能です。

 
spacing 間隔を100にしてみるとこのようになります。



 
また、マイナスの設定もでき、上下の位置が逆転します。


 

Spacer()

 
Spacer()を使うと上寄せや下寄せが可能となります。
例えば、”Hello, world!” を上寄せするには、


これは、画面サイズを計算せずに中央と上下に分散してレイアウトしたい場合などに役立つかもしれません。


 

background

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



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

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

frame

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


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


frameの左端に文字列を揃えたい時はalignmentを変えます。



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


 

Divider

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


 

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

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

 

References:
init(alignment:spacing:content:)
VStack | Apple Developer Documentation
Horizontal alignment modes | 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:


シェアする

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

フォローする