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

【问题标题】：How to set controllers in view in SwiftUI如何在 SwiftUI 中设置视图中的控制器
【发布时间】：2020-06-09 17:21:52
【问题描述】：

我在设置 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()
    }
}

目前看起来是这样的：

【问题讨论】：

这里有很多与问题无关的代码。下次你可能想provide a minimal reproducible example。

标签： swift stack swiftui

【解决方案1】：

GeometryReader 正在消耗所有可用空间。默认情况下，可调整大小的图像将尝试适应可用空间，因此如果您设置其框架的高度，则不需要 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))

    ...
}

【讨论】：