SwiftUIにおいて、Text
やImage
などのViewを縦に並べるにはVStack
を使います。
VはVerticalの略で、「垂直」を意味します。
目次
VStackの基本的な使い方
VStack {
子View1
子View2
子View3
}
サンプルコード
struct ContentView: View {
var body: some View {
VStack {
Text("Hello")
.font(.system(size: 100))
.frame(width:300)
.background(Color.yellow)
Text("World")
.font(.system(size: 50))
.frame(width:300)
.background(Color.orange)
}
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/11/5c90a879f0d491d6f13f9fa5fafb348d-1024x509.png)
VStack内の子ビューの間隔を調整するには?
子ビューの間隔を調整するには、spacing
プロパティを使用します。
VStack(spacing: 子View同士の間隔) {
子View1
子View2
子View3
}
サンプルコード
struct ContentView: View {
var body: some View {
VStack(spacing: 50) {
Text("Hello")
.font(.system(size: 100))
.frame(width:300)
.background(Color.yellow)
Text("World")
.font(.system(size: 50))
.frame(width:300)
.background(Color.orange)
}
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/11/3c5fa613fcdc3cd6152a2ee4fc363f78-1024x507.png)
VStackでの配置指定を変更するには?
VStack
内での配置位置を変更するには、alignment
プロパティを使用します。
VStack(alignment: 配置位置) {
子View1
子View2
子View3
}
配置位置は.leading
.center
.trailing
の3種類あります。leadingは左寄せ、trailingは右寄せです。
サンプルコード
struct ContentView: View {
var body: some View {
VStack(alignment:.leading) {
Text("Hello")
.font(.system(size: 100))
.frame(width:400)
.background(Color.yellow)
Text("World")
.font(.system(size: 50))
.frame(width:600)
.background(Color.orange)
}
.background(Color.gray)
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/11/435cb38a7c2cee0bd8d583bb80fa4fb7-1024x512.png)
関連記事
Seeds
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://seeds-digital.com/wp-content/uploads/2023/11/swiftui-hstack.png)
【SwiftUI】HStackでViewを横に並べる | Seeds
SwiftUIにおいて、TextやImageなどのViewを横に並べるにはHStackを使います。 HはHorizontalの略で、「水平」を意味します。 HStack基本的な使い方 HStack { 子View1 子Vie…
Seeds
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://seeds-digital.com/wp-content/uploads/2023/11/swiftui-zstack.png)
【SwiftUI】ZStackでViewを重ねる | Seeds
TextやImageなどのViewを重ねて表示するにはZStackを使います。 Zは特に何かの単語の略ではなく、Z軸が奥行きを表すので、そのZが使われていると思われます。 ZStackの基本…
Comment