TextField inside of a Form

We can simply use HStack and put the components inside.

Form {
Section {
HStack {
Image(systemName: "person.circle")
TextField("", text: $nickname)
}
} header: {
Text("YOUR BUDDY'S NAME")
} footer: {
Text("Your workout buddy must have an account and a nickname provided on their app profile.")
}
}

Plain TextField

We can use HStack, put the image and text field into it. Then we can draw a border around it, so it looks like a text field, indicating that user can tap on it and enter the value.

--

--

The buttons in SwiftUI forms are aligned to left by default.

Using frame

A simple way how to put the button to the middle of a section.

Form {
Section {
Button(action: {

}, label: {
Text("Share workout")
})
.frame(maxWidth: .infinity)
}
}

You could add alignment parameter, but it can be avoided as it is the default behavior and is not necessary .frame(maxWidth: .infinity, alignment: .center)

Using HStack and Spacers

An alternative approach, could be useful in special scenarios.

Form {
Section {
Button(action: {

}, label: {
HStack {
Spacer()
Text("Share workout")
Spacer()
}
})
}
}

Materials

--

--