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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNTYzODIsIm5iZiI6MTcxOTM1NjA4MiwicGF0aCI6Ii8zMDM3ODIxNC8zMTY2MTE0ODItNjg1YjU3NmYtMmU4MS00ZTRlLWE5OWEtNWZmMTRlZTY1ODI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI1VDIyNTQ0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ3MDI3ZWNlNTNjYzU5OWRlNzdmY2Y3YjE2ZTE2NjM1YWIwNjkxYWFiOWYzNDg4MTcyMmYzODdhM2I3ZTRjMDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.JdmIoFN_-BuiKi3ZBPwdMW4d6KWkhxTks25RRrMBOz4)
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))
}
}