Hi,
I have been trying to makean app with SwiftUI. Everything works, but when the app is shown on the screen (iPhone or iPad) everything is shifted to the left, dispite using GeometryReader.
Such as:
What I need:
---> Centered <---
What is displayed:
<--- Everything shifted to the left.
Any ideas?
Dan Uff
import SwiftUI
import AVFoundation
import AVKit
struct Middle: View {
@State private var txtInput: String = ""
@State private var txtEmpty = false
var body: some View {
GeometryReader() {_ in
ZStack {
Color.init(red: 0, green: 0, blue: 1)
.edgesIgnoringSafeArea(.all)
}
VStack (alignment: .center){
Text("What would you like to say?")
.bold()
.font(.custom("Times New Roman", size: 27))
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
.accessibility(hint: Text("Type what you want to say here. Tap Return when Finished."))
TextField("Tap here to start.", text: self.$txtInput)
.background(Color .white)
.frame(width: 320, height: 50, alignment: .leading)
.font(.custom("ChalkBoard", size: 30))
.textFieldStyle(RoundedBorderTextFieldStyle())
.multilineTextAlignment(.leading)
.keyboardType(.default)
.accessibility(hint: Text("Start typing here."))
// Count text as the user types:
Text("Word Count: \(self.txtInput.count)")
.bold()
.font(.custom("Chalkboard", size: 30))
.foregroundColor(Color.white)
Button(action: {
if self.txtInput.isEmpty
{
let toSay = AVSpeechUtterance(string: "I have nothing to say. Type something in the text area above the speaker button.")
let alex = AVSpeechSynthesizer()
alex.speak(toSay)
}else {
let toSay = AVSpeechUtterance(string:
self.txtInput)
let alex = AVSpeechSynthesizer()
alex.speak(toSay)
}
}) {
VStack(alignment: .center) {
Image(systemName: "speaker.2")
.resizable()
.frame(width: 80, height: 45)
.foregroundColor(Color.white)
.accessibility(hint: Text("Tap speaker to talk."))
.padding(20)
.background(Color.green)
.padding()
.clipShape(Rectangle())
.buttonStyle(PlainButtonStyle())
}
// Clear Button:
Button(action: {
//
}) {
Text("")
.font(.largeTitle)
.foregroundColor(Color.white)
}
Image(systemName: "trash")
.resizable()
.frame(width:70, height: 45)
.foregroundColor(Color.white)
.accessibility(hint: Text(""))
.padding(20)
.background(Color.green)
.padding()
.clipShape(Rectangle())
.buttonStyle(PlainButtonStyle())
.onTapGesture {
self.txtInput = ""
}.padding()
}.padding()
}
}
}
struct Middle_Previews: PreviewProvider {
static var previews: some View {
Middle()
}
}
}As far as I tried, the contents in VStack are aligned center as expected.
Just that VStack itself is placed left of its enclosing view.
var body: some View {
GeometryReader() {_ in
ZStack {
Color.init(red: 0, green: 0, blue: 1)
.edgesIgnoringSafeArea(.all)
}
VStack (alignment: .center){
//...
}.background(Color.purple) //<- Color the vstack and see how it is placed
}
}You may need to stretch your VStack.
var body: some View {
GeometryReader() {_ in
ZStack {
Color.init(red: 0, green: 0, blue: 1)
.edgesIgnoringSafeArea(.all)
}
VStack (alignment: .center){
//...
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}