How to set controllers in view in SwiftUI - swift

Question

I'm having a problem with set Image and Text. I would like to have Image on top of the view, then have a break and put several Text controls one below the other, but everytime my Image is almost on the center of the View. Where is the problem? Below is my code:
import SwiftUI
struct ScanWithPhotoFromLibrary: View {
#State var cupWidth: String = ""
#State var cupHeight: String = ""
#State var stemLength: String = ""
#State var leafWidth: String = ""
#State var leafLength: String = ""
#State private var showSheet: Bool = false
#State private var showImagePicker: Bool = false
#State private var sourceType: UIImagePickerController.SourceType = .camera
#State private var userImage: UIImage?
#State private var flowerName: String = ""
#EnvironmentObject var env: ImagePickerCoordinator
var body: some View {
NavigationView{
ZStack{
VStack(){
GeometryReader { geo in
Image(uiImage: self.userImage ?? UIImage(named: "flower_logo")!)
.resizable()
.aspectRatio( contentMode:.fill)
.edgesIgnoringSafeArea(.top)
.frame(width: geo.size.width, height: 350)
}
Spacer()
Text("Enter dimensions in centimeters [cm]")
.bold()
.font(.system(size:22))
HStack(alignment: .top){
Text("Cup width: ")
.alignmentGuide(.leading, computeValue: { d in d[.trailing] })
.font(.system(size: 20))
TextField("0.00", text: $cupWidth)
.font(.system(size:20))
.keyboardType(.numberPad)
.foregroundColor(.green)
}.padding(.horizontal, 30)
}
}
}
.navigationBarTitle(Text(flowerName).foregroundColor(.blue), displayMode: .inline)
.navigationBarItems(trailing:
HStack {
Button("Library") {
self.showImagePicker = true
self.sourceType = .photoLibrary
print("Library tapped!")
}
}
)
.sheet(isPresented: $showImagePicker) {
ImagePicker(image: self.$userImage, isShown: self.$showImagePicker, flowerName: self.$flowerName, sourceType: self.sourceType)
}
}
}
struct ScanWithPhotoFromLibrary_Previews: PreviewProvider {
static var previews: some View {
ScanWithPhotoFromLibrary()
}
}
At the moment it looks like this:

Answer 1

The GeometryReader is consuming all available space. A resizable Image will try to fit in the available space by default, so if you set the height of its frame, GeometryReader is not necessary. You'll probably want to use content mode fit instead of fill as well. I also don't see why you would want to ignore the safe area edges here; this is a logo, not a background and it should probably not be obscured by a notch.
VStack {
Image(uiImage: self.userImage ?? UIImage(named: "flower_logo")!)
.resizable()
.aspectRatio(contentMode:.fit)
.frame(height: 350)
Spacer()
Text("Enter dimensions in centimeters [cm]")
.bold()
.font(.system(size:22))
...
}