Spacer はその名の通り View の間の空白の領域を表現するために使う View の一種です。
SwiftUI のレイアウトをマスターするには欠かせない役割を担っているので、よく使う例を紹介使用と思います。
【SwiftUI】Spacer の使い方
テキストを左寄せ、右寄せにする
左寄せ
HStack {
Text("ABCDEFGHIJKLMN")
Spacer()
}
![](https://www.yururiwork.net/wp-content/uploads/2021/06/simulator_screenshot_624D766D-B1C0-4BEC-965A-7E8F3609A3DD-576x1024.png)
右寄せ
HStack {
Spacer()
Text("ABCDEFGHIJKLMN")
}
![](https://www.yururiwork.net/wp-content/uploads/2021/06/simulator_screenshot_6BCA53B4-BFC6-4EC9-9E23-68C14A39DA36-576x1024.png)
HStack を VStack に変えれば、上寄せ・下寄せにすることもできます。
左右に固定幅の余白を設ける
HStack {
Spacer().frame(width: 50)
Text("AAAAAAAAAAAA...AAA")
Spacer().frame(width: 50)
}
![](https://www.yururiwork.net/wp-content/uploads/2021/06/simulator_screenshot_EAEC3056-D5E7-4C8E-8B29-0769D6BB925F-576x1024.png)
テキストの始端や折り返しの様子から、左右に50ptの余白が取れていることがわかると思います。
左右に最低幅のある可変な余白を設ける
HStack {
Spacer(minLength: 100)
Text("ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ")
Spacer(minLength: 100)
}
![](https://www.yururiwork.net/wp-content/uploads/2021/07/simulator_screenshot_0C381F41-CD28-4DA6-A096-14EB5BFDCF34-576x1024.png)
Spacer(minLength: 100) とすることで最低幅を指定することができます。文字列の左右には100以上の幅が取られています。
文字列を長くすると左右の幅100が最低限確保されるため、以下のように文字列が改行されます。
![](https://www.yururiwork.net/wp-content/uploads/2021/07/simulator_screenshot_A0B83422-D674-4878-BECB-3967AB82E78E-576x1024.png)
HStack と VStack のプロパティでもスペースを作れる
Spacer 自体の話ではありませんが、実は HStack と VStack には spacing というプロパティがあ利、これを使うことで均等にスペースを配置することができます。
VStack(spacing: 20) {
Text("ABCDEFGHIJKLMN")
Text("ABCDEFGHIJKLMN")
Text("ABCDEFGHIJKLMN")
}
![](https://www.yururiwork.net/wp-content/uploads/2021/07/simulator_screenshot_C60E742F-FF7B-4EFC-9FC3-B120B4A43409-576x1024.png)
もちろん、Spacer と組み合わせることもできます。
VStack(spacing: 20) {
Text("ABCDEFGHIJKLMN")
Text("ABCDEFGHIJKLMN")
Spacer().frame(height: 20)
Text("ABCDEFGHIJKLMN")
}
![](https://www.yururiwork.net/wp-content/uploads/2021/07/simulator_screenshot_90319829-8EBC-409D-A4EF-3E89C008D875-576x1024.png)
HStack, VStack の spacing と Spacer を使って効率よくレイアウトできると良いですね。
以上
コメントを残す