尝试格式化右上角的图像 – SwiftUI

Question

我正在尝试使用右上角的设置按钮来编写 iOS 应用程序。我尝试使用 aSpacer使 SF 符号图像保持在右上角，但当我使用单个垫片时，它将图像推到屏幕边界之外。我是否可以添加约束以将图像保持在右上角，而不超出屏幕边界？如果可能的话，将图像保留在所有 iOS 设备的右上角？我对 SwiftUI 非常陌生，因此非常感谢任何见解和建议！

这是我正在使用的代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
    // view code
    ZStack {
        Image("Background").resizable()
            .aspectRatio(contentMode: .fill).ignoresSafeArea()
        
        VStack{
            
            HStack {
            
            Button(action: {}, label: {
                Image(systemName: "gear").resizable().aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)                })
            }
            .padding()
            
            Spacer()
    
            HStack {
                
                
                Button(action: {}, label: {
                    Image(systemName: "plus")
                        .resizable().aspectRatio(contentMode: .fit).frame(width: 150, height: 150, alignment: .center).padding().border(Color.white, width: 8).cornerRadius(10.0).foregroundColor(.white)
                })
            }
            Spacer()
            
        }
    }
    
    
    
    
}
       

带垫片	不带垫片

Answer 1

编辑：因为您的图像位于 中ZStack，所以它会扩展并溢出屏幕。您应该使用background修饰符。

struct ContentView: View {
    var body: some View {
        VStack{
            HStack {
                Spacer()
                
                Button(action: {}, label: {
                        Image(systemName: "gear").resizable().aspectRatio(contentMode: .fit)
                            .frame(width: 50, height: 50)                })
            }
            .padding()
            
            Spacer()
            
            HStack {
                Button(action: {}, label: {
                    Image(systemName: "plus")
                        .resizable().aspectRatio(contentMode: .fit).frame(width: 150, height: 150, alignment: .center).padding().border(Color.white, width: 8).cornerRadius(10.0).foregroundColor(.white)
                })
            }
            Spacer()
        }
        
        /// here!
        .background(
            Image("Background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
        )
    }
}

结果：

如果您使用 aZStack对背景进行分层，则内部视图可能会扩展到边缘之外。我尝试在下面重现您想要的内容，但如果您发布更多代码，将会很有帮助。

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
            
            Image(systemName: "plus")
                .resizable()
                .foregroundColor(.white)
                .frame(width: 200, height: 200)
            
            VStack{
                HStack {
                    Spacer()
                    
                    Button(action: { }) {
                        Image(systemName: "gear")
                            .resizable()
                            .foregroundColor(.white)
                            .frame(width: 50, height: 50)
                        
                    }
                }
                
                Spacer()
            }
        }
    }
}

结果：