SwiftUI does not allow for a child of an HStack
or a VStack
to be centered. This package aims to provide a solution to this problem.
- Add the
CenteredStack
package to your Xcode project. - Import
CenteredStack
to your file.
import SwiftUI
import CenteredStack // Here
struct ContentView: View {
...
}
- Use it like a regular
HStack
orVStack
.
struct ContentView: View {
var body: some View {
CenteredVStack {
// Add content here
}
}
}
- Add the
centered()
modifier to the child you want to center.
struct ContentView: View {
var body: some View {
CenteredVStack {
Text("Not centered")
Text("Centered")
.centered() // Here
}
}
}
You cannot use a Spacer
and the .centered()
modifier in the same stack.
If you need to use a Spacer
, use a ZStack
.
Here is an example:
![](https://private-user-images.githubusercontent.com/30378214/316611482-685b576f-2e81-4e4e-a99a-5ff14ee65825.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA3NDU2NzYsIm5iZiI6MTcyMDc0NTM3NiwicGF0aCI6Ii8zMDM3ODIxNC8zMTY2MTE0ODItNjg1YjU3NmYtMmU4MS00ZTRlLWE5OWEtNWZmMTRlZTY1ODI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEyVDAwNDkzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUyNmNmM2QxNDIwMjc4Njg0ZjljMWU0NDgzMDgxNzQzMDgyNTI1MTY4ODhiOGNmMWM3NmU5MTE2MDM1ZDk4YWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qlW_pDFAUXS-lo7pl-rrtHapoXgIziBV6XAxbRaZCZs)
struct ContentView: View {
var body: some View {
ZStack {
HStack { // Separate HStack that contains the Spacer
Button("Back") {}
Spacer()
Button("Add") {}
}
CenteredHStack {
Image(systemName: "person.fill")
Text("John Smith")
.centered()
}
}
.padding(20)
.background(.blue.opacity(0.1))
.clipShape(.rect(cornerRadius: 8))
}
}