如何在 SwiftUI 中為我的視圖提供背景圖像

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。

Answer 1

您應該使用 ZStack 來完成這項工作，或者像在代碼中一樣將圖像發送到背景：

此外，我為您制作了一些代碼，讓您可以自由使用該文件 Image，並且您可以通過系統形狀獲得相同且更好的結果。 您可以更改顏色、形狀、大小、氣泡數量和所有內容。 .

---

---

使用對比：讓顏色像你的顏色

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 ：使用此向下代碼，您的Circle/bubble開始運行，它們以平滑的 animation 移動。

@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))
    
}

Answer 2

好像你可以只使用background(alignment:content:)修飾符

因此，將此背景修飾符添加到您的視圖中：

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

在我看來，這個解決方案是最迅速的