Place text between top and center of the screen - ios

Question

Is there a simple way to place text relatively between the top and center of the screen? With 'simple' I mean preferably without GeometryReader and overt calculations.
I've tried various combinations of VStack, Zstack and Spacer() but to no avail.
Code and screenshot as illustration:
struct ContentView: View {
var body: some View {
Text("Between top and center")
.offset(y: -150)
Text("Center")
}
}

Answer 1

A possible solution is to create two views on each side of the centred text (one hidden):
struct ContentView: View {
var body: some View {
VStack {
Spacer()
Text("Between top and center")
Spacer()
Text("Center")
Spacer()
Text("")
Spacer()
}
}
}
Alternatively, to be fool-proof (in case they change the behaviour of Text("") in the future release):
struct ContentView: View {
var body: some View {
VStack {
Spacer()
Text("Between top and center")
Spacer()
Text("Center")
Spacer()
Text("Between top and center")
.opacity(0)
Spacer()
}
}
}
(If needed, Text("Between top and center") can be extracted as a subview to avoid code duplication.)
As you said:
Spacer() [...] ensure[s] that the empty spaces between the views are equal in size
That's exactly the reason why I recommended to extract Text("Between top and center") as a subview. Then, you can change the font, size etc. of the view in one place only.
The adapted solution is:
struct ContentView: View {
var body: some View {
ZStack {
VStack {
Spacer()
subview
Spacer()
Spacer()
subview
.opacity(0)
Spacer()
}
VStack {
Spacer()
Text("Center")
Spacer()
}
}
}
var subview: some View {
Text("Between top and center")
.font(.caption)
// apply all other modifiers if you want
}
}

Answer 2

Here is possible solution (tested with Xcode 12.1 / iOS 14.1)
struct ContentView: View {
var body: some View {
VStack {
Color.clear.overlay(
Text("Between top and center") // << here !!
)
// Text("Between top and center")
// .frame(maxWidth: .infinity, maxHeight: .infinity) // alternate !!
Text("Center")
Color.clear
}
}
}
Update: added alternate with .frame but it is valid only if there should be the only one Text, whereas in .overlay it is possible to put anything.

Answer 3

Here is another solution using the method of VStack Spacers, I also used a little padding to get you closer to the center.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Top").bold()
.foregroundColor(.blue)
Spacer()
Text("Your desired area")
Spacer()
Text("Middle Text").bold()
.foregroundColor(.blue)
.padding(.bottom, 200)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}