HStack, VStack, ZStackで要素を並べる
Published by @SoNiceInfo at 6/25/2020
要素を並べるにはStackを利用します。
Stackの使い方
Stackには以下の3種類があり使い分ける必要があります。
HStack左右に並べるVStack上下に並べるZStack前後に並べる
StackはViewプロトコルに準拠しているので修飾子で背景色やパッディング等さまざま変更できます
以下の例ではマップを縦に、テキストを横に並べています。VStackでマップとテキストを上下に並べています。(赤枠)
SwiftUIでマップを使う方法は地図を表示するで詳しく書いています。HStackでテキストとSpacer()を左右に並べています。さらにpadding()で上下左右に余白を作っています。(青枠)
ここでは利用していませんがZStackを利用する場合、先に書いたViewが奥側になります。
上に配置したいViewを付け足す形で書きます。
//
// ContentView.swift
//
import SwiftUI
import MapKit
struct ContentView: View {
var body: some View {
VStack() {
MapView()
.edgesIgnoringSafeArea(.all)
HStack {
Text("Tokyo")
.font(.largeTitle)
Spacer()
Text("Tokyo Tower")
}.padding()
}
}
}
struct MapView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
}
func updateUIView(_ uiView: MKMapView, context: Context) {
let coordinate = CLLocationCoordinate2D(
latitude: 35.655164046, longitude: 139.740663704)
let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
let region = MKCoordinateRegion(center: coordinate, span: span)
uiView.setRegion(region, animated: true)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
参考
HStack — SwiftUI Tutorials | Apple Developer DocumentationVStack — SwiftUI Tutorials | Apple Developer Documentation
ZStack — SwiftUI Tutorials | Apple Developer Documentation
