如何在SwiftUI中为我的View添加背景图片

Question

我对SwiftUI和iOS不熟悉，我在让VStack正确地堆叠项目方面遇到了麻烦。主要问题是，左上角的图像似乎太大了。这是我的布局中图像大小的截图：

这是它应该看起来的样子：

这是SwiftUI代码：

    @State private var email: String = ""
    @State private var password: String = ""
    @State private var isEditing = false
    var body: some View {
        return VStack(content: {
            
            Image("UIBubble")
                .resizable()
                .frame(width: 217, height: 184, alignment: .leading)
                .position(x: 108, y: 92);

            Text("PET SUPPORT").font(Font.custom("Permanent Marker", size: 36))
                .foregroundColor(Color.petSupportText)
                .padding()
                .frame(width: .infinity, height: 0, alignment: .center);
            
            Text("EMAIL").font(Font.custom("Permanent Marker", size: 18))
                .padding(.top, 20)
                .padding(.horizontal, 0)
                .frame(width: .infinity, height: 0, alignment: .leading);
            
            TextField("Email", text: $email) {
                isEditing in self.isEditing = isEditing
            }
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .padding(.horizontal, 30)
            .padding(.top, 20);
            
            Divider()
                .padding(.horizontal, 30)
                .foregroundColor(.black);
            
            Text("PASSWORD").font(Font.custom("Permanent Marker", size: 18)).padding(.top, 50).padding(.horizontal, 0).frame(width: .infinity, height: 20, alignment: .leading);
            
            TextField("Password", text: $password) {
                isEditing in self.isEditing = isEditing
            }
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .padding(.horizontal, 30)
            .padding(.top, 20)
            
            Divider().padding(.horizontal, 30).foregroundColor(.black);
            
        })
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea()
    }

图片出了点问题：

这个图像本身的尺寸是217x184。

- Dayem Saeed

Answer 1

你应该使用ZStack来完成这项工作，或者像下面的代码一样将图像发送到后台： < p>我还为您编写了一些代码，使您可以自由使用该文件中的图像，并获得与系统形状相同且更好的结果。您可以更改颜色、形状、大小、气泡数量以及所有其他内容。

---

---

使用对比度：使颜色像您的颜色。

import SwiftUI

struct ContentView: View {
    
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var showPassword = false
    
    var body: some View {
        
        return VStack(content: {
            
            Spacer()
                .frame(height: 100)
            
            Text("PET SUPPORT")
                .font(Font.custom("Permanent Marker", size: 36))
                .padding()
            
            Group {
                
                HStack {
                    
                    Text("EMAIL")
                        .font(Font.custom("Permanent Marker", size: 18))
                        .padding(.top, 20)
                    
                    Spacer()
                    
                }
                
                TextField("Email", text: $email)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                    .keyboardType(.emailAddress)      // <<: Here:  A type optimized for multiple email address entry (shows space @ . prominently).
                    .padding(.top, 20)
                
                
                Divider()
                    .foregroundColor(.black)
                
            }
            
            
            Group {
                
                HStack {
                    
                    Text("PASSWORD")
                        .font(Font.custom("Permanent Marker", size: 18))
                        .padding(.top, 50)
                    
                    Spacer()
                    
                }
                
                ZStack {
                    
                    if showPassword {
                        TextField("Password", text: $password)
                    }
                    else {
                        SecureField("Password", text: $password)
                    }
                    
                }
                .frame(height: 20)
                .overlay(Image(systemName: showPassword ? "eye.slash" : "eye").onTapGesture { showPassword.toggle() }, alignment: .trailing)
                .autocapitalization(.none)
                .disableAutocorrection(true)
                .padding(.top, 20)
                
                Divider()
                    .foregroundColor(.black)
                
            }
            
            
            
            Group {
                
                Button("Sign Up") {}
                    .padding()
                
                Button("Login") {}
                    .padding()
                
            }
            
            Spacer()
            
        })
        .padding(.horizontal, 30)
        .background(bubble, alignment: .topLeading)
        .background(bubble.rotationEffect(Angle(degrees: 180)), alignment: .bottomTrailing)
        .ignoresSafeArea()
        .statusBar(hidden: true)
        
    }

    var bubble: some View {   // <<: you can put this part out and use update code for this part

        Image("UIBubble")
            .resizable()
            .scaledToFit()
            .frame(width: 217, height: 184, alignment: .leading)

    }
    
}

---

更新：您可以使用类似于以下代码的高质量系统形状替换该文件图像！

var bubble: some View {
   
    ZStack {
        
        Circle()
            .fill(Color(UIColor.systemTeal).opacity(0.2))   // <<: Here: opacity = 0.2
            .frame(width: 300, height: 300, alignment: .center)
            .offset(x: -100, y: -180)
        
        
        Circle()
            .fill(Color(UIColor.systemTeal).opacity(0.2))   // <<: Here: opacity = 0.2
            .frame(width: 300, height: 300, alignment: .center)
            .offset(x: -180, y: -100)
        
    }
    .contrast(3.0)           // <<: Here: This make your Color POP out!

}

---

更新2：使用这段代码，您的圆形/气泡将栩栩如生，并以平滑的动画移动。

@State private var startAnimation: Bool = false

var bubble: some View {
    
    ZStack {
        
        Circle()
            .fill(Color(UIColor.systemTeal).opacity(0.2))   // <<: Here: opacity = 0.2
            .frame(width: 300, height: 300, alignment: .center)
            .offset(x: startAnimation ? -110 : -100, y: startAnimation ? -180 : -150)
        
        
        Circle()
            .fill(Color(UIColor.systemTeal).opacity(0.2))   // <<: Here: opacity = 0.2
            .frame(width: 300, height: 300, alignment: .center)
            .offset(x: startAnimation ? -180 : -150, y: startAnimation ? -90 : -100)
        
    }
    .contrast(3.0)                   // <<: Here: This make your Color POP out!
    .onAppear() { startAnimation = true }
    .animation(Animation.easeInOut(duration: 3.0).repeatForever(autoreverses: true))
    
}

- ios coder

---

谢谢！这修复了图像尺寸问题，但将图像和第一个 VStack 水平居中。如何将其移动到左侧，就像我问题中的布局图像一样？ - Dayem Saeed

@DayemSaeed：我想我刚刚解决了你所有的问题，请现在尝试一下代码。 - ios coder

@DayemSaeed: 不用谢，我也在更新你的键盘方法。我会在几分钟内更新我的代码。 - ios coder

@DayemSaeed：完全没有问题，我们所有人都从同一个起点开始，我改进了你的键盘。 - ios coder

谢谢你的所有帮助！当我开始使用NavigationView时，又遇到了一个问题。你能在聊天中帮帮我吗？ - Dayem Saeed

Answer 2

看起来你可以直接使用background(alignment:content:)修饰符

因此，将此背景修饰符添加到您的视图中：

VStack {
    ...
}
.background(alignment: .topLeading) {
    Image("UIBubble")
}
.background(alignment: .bottomTrailing) {
    Image("UIBubble2"),
}

在我看来，这个解决方案是最具Swifty风格的。

- Daniel Pustotin