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

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中设置视图中的控制器

【英文标题】：How to set controllers in view in 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。

【参考方案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))

    ...