Question

我在设置Image和Text时遇到了问题。我想在视图上方放置Image，然后休息一下，将几个Text控件放置在另一个下方，但是每次我的Image几乎都在视图的中心时。问题出在哪儿？下面是我的代码：

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()
    }
}

目前看起来像这样：

Answer 1

GeometryReader占用了所有可用空间。可调整大小的Image默认情况下会尝试适应可用空间，因此，如果您设置其框架的高度，则不需要GeometryReader。您可能需要使用内容模式适合而不是填充。我也看不到为什么您会在这里忽略安全区域边缘；这是一个徽标，而不是背景，它可能不应该被凹口遮盖。

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))

    ...
}

如何在SwiftUI中在视图中设置控制器

1 个答案: