ios - 尝试在右上角格式化图像 - SwiftUI

Question

我正在尝试使用右上角的设置按钮对 iOS 应用程序进行编程。我尝试使用 aSpacer让 SF Symbol 图像保持在右上角，但是当我使用单个垫片时，它会将图像推到屏幕边界之外。我是否可以添加约束以将图像保持在右上角，而不会超出屏幕边界？如果可能的话，将图像保留在所有 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()
            
        }
    }
    
    
    
    
}
       

带垫片	无垫片

标签： iosswiftimageswiftui

Answer 1

编辑：因为您的图像在 a 中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()
            }
        }
    }
}

结果：