SwiftUI相册图片选择后显示异常及圆形样式调整问题

核心问题分析 #

原代码存在三个关键问题导致显示异常：

1. 图片数据赋值错误（使用append而非直接替换），导致图片加载异常
2. ZStack导致图片与选择按钮重叠，且图片使用edgesIgnoringSafeArea铺满屏幕
3. 布局结构不合理，Spacer位置错误导致元素偏移

修复后的完整代码 #

struct AddContactView: View {
    @State private var nameInput = ""
    @State private var phoneInput = ""
    @State private var selectedPhoto: PhotosPickerItem?
    @State private var selectedPhotoData: Data?

    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 16) { // 统一设置间距，提升布局美观度
                TextField("Full Name", text: $nameInput)
                    .textContentType(.name)
                
                TextField("Phone Number", text: $phoneInput)
                    .textContentType(.telephoneNumber)
                
                // 图片显示区域：64×64圆形
                if let selectedPhotoData, let image = UIImage(data: selectedPhotoData) {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFill()
                        .frame(width: 64, height: 64)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.gray, lineWidth: 1)) // 可选：添加灰色边框增强视觉效果
                }
                
                // 图片选择按钮
                PhotosPicker(selection: $selectedPhoto, matching: .any(of: [.images, .not(.livePhotos)])) {
                    Label("Select Photo", systemImage: "photo")
                }
                .tint(.blue)
                .onChange(of: selectedPhoto) { newPhoto in
                    Task {
                        guard let newPhoto = newPhoto else { return }
                        if let data = try? await newPhoto.loadTransferable(type: Data.self) {
                            selectedPhotoData = data // 直接替换数据，而非追加
                        }
                    }
                }
                
                Spacer() // 将Spacer放在最后，让上方元素自然靠上排列
            }
            .padding()
            .navigationTitle("Add Contact")
        }
    }
}

关键修改说明 #

• 数据赋值修复：将selectedPhotoData?.append(data)改为selectedPhotoData = data，确保每次选择新图片时替换旧数据，避免数据累加导致的加载异常
• 图片样式调整：
  • 设置固定frame(width: 64, height: 64)确保尺寸符合要求
  • 添加clipShape(Circle())实现圆形裁剪
  • 可选添加overlay边框增强视觉区分度
• 布局优化：
  • 移除ZStack，将图片和选择按钮按顺序排列在手机号输入框下方
  • 调整Spacer位置到VStack末尾，避免元素被挤到屏幕底部
  • 给VStack设置spacing:16统一元素间距，提升布局美观性
• 安全解包：使用guard let newPhoto = newPhoto替代强制解包newPhoto!，避免空值崩溃

效果说明 #

修复后：

• 未选择图片时，选择按钮显示在手机号输入框下方
• 选择图片后，64×64圆形图片会显示在选择按钮上方
• 元素布局正常，无偏移或铺满屏幕的问题

内容的提问来源于stack exchange，提问作者vrao