当附加到无图像时，框架修改器为什么仍会影响其他视图？

如何解决当附加到无图像时，框架修改器为什么仍会影响其他视图？

self.imagesViewModel.allImages[post.imageContentURL]?
    .resizable()
    .scaledToFill()
    .frame(width: 343,height: 171,alignment: .center)
    .clipShape(Rectangle())
    .shadow(radius: 1)

当返回的图像值为nil时，此代码应执行的操作无济于事。但是无论出于何种原因，.frame修饰符仍然会影响滚动视图内的其他元素。最终会在物理上而不是在视觉上阻碍导航链接。

我已经确认删除.frame后，一切都会按照我的预期进行。但是我需要对图像设置限制，所以我不能没有类似的东西。

我尝试将代码放在if语句中以检查nil并仅在返回的图像上显示，但这没有用。此代码的其他变体也不起作用。

if self.imagesViewModel.allImages[post.imageContentURL] != nil {
    self.imagesViewModel.allImages[post.imageContentURL]?
        .resizable()
        .scaledToFill()
        .frame(width: 343,height: 171)
        .clipShape(Rectangle())
        .shadow(radius: 1)
}

我也尝试过将最小值设置为零，但是没有运气。

我想知道这是否与我在Xcode 12 beta 5上使用新的SwiftUI应用程序生命周期有关。在iPhone（iOS 14）上运行代码时，我遇到了相同的物理障碍，但是在scrollview元素之间添加了额外的视觉间距。

这是我的代码的简化版本，可以复制我的问题：

import SwiftUI
import Combine

struct Post: Codable,Identifiable {
    var id: Int
    var text: String
    var imageContentURL: String?
}

class PostsViewModel: ObservableObject {
    @Published var posts: [Post] = []
}

class ImagesViewModel: ObservableObject {
    @Published var allImages: [String?: Image] = [:]
}

/// The View of the content displayed in Home
struct PostLayout: View {
    @EnvironmentObject var imagesViewModel: ImagesViewModel
    var post: Post
    
    init(post: Post) {
        self.post = post
    }
    
    var body: some View {
        VStack {
            // This is the navigation link that gets obstructed
            NavigationLink(destination: SomeOtherView()) {
                Image(systemName: "circle.fill")
                    .resizable()
                    .frame(width: 48,height: 48)
                    .clipShape(Circle())
            }
            
            Text(self.post.text)
            
            // MARK: This is the problem code,border added for clarity
            self.imagesViewModel.allImages[self.post.imageContentURL]?
                .resizable()
                .scaledToFill()
                .frame(width: 343,height: 171)
                .clipShape(Rectangle())
                .shadow(radius: 1)
                .border(Color.black,width: 1)
        }
        .border(Color.black,width: 1)
    }
}

/// View that is navigated to from Home
struct SomeOtherView: View {
    var body: some View {
        Text("SomeOtherView")
    }
}

/// Main displayed view
struct Home: View {
    @EnvironmentObject var postsViewModel: PostsViewModel
    @EnvironmentObject var imagesViewModel: ImagesViewModel

    var body: some View {
        NavigationView {
            ScrollView {
                ForEach(self.postsViewModel.posts) { post in
                    PostLayout(post: post)
                }
            }
            .onAppear() {
                // All displayed content created here
                var post1 = Post(id: 0,text: "Content")
                let post2 = Post(id: 1,text: "Content")
                var post3 = Post(id: 2,text: "Content")
                let post4 = Post(id: 3,text: "Content")
                let imageURL = "someImageURL"
                
                self.imagesViewModel.allImages[imageURL] = Image(systemName: "circle")
                
                // Only two posts are supposed to have an imageURL
                post1.imageContentURL = imageURL
                post3.imageContentURL = imageURL
                self.postsViewModel.posts.append(contentsOf: [post1,post2,post3,post4])
            }
            .navigationTitle("Home")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Home()
            .environmentObject(PostsViewModel())
            .environmentObject(ImagesViewModel())
    }
}

解决方法

您已经注意到.frame修饰符不是特定于图像的。即使图片为nil也可以使用。

您可以做的是检查Image是否可以加载。您可以使用UIImage(named:)（返回可选）来完成此操作：

@ViewBuilder
var body: some View {
    if UIImage(named: "imageName") != nil {
        Image("imageName")
            .resizable()
            .scaledToFill()
            .frame(width: 343,height: 171,alignment: .center)
            ...
    }
}

或者，或者：

@ViewBuilder
var body: some View {
    if imagesViewModel.allImages[post.imageContentURL] != nil {
        imagesViewModel.allImages[post.imageContentURL]!
            .resizable()
            .scaledToFill()
            .frame(width: 343,alignment: .center)
            ...
    }
}

---

编辑

在字典中不需要可选的String?。只需将其替换为：

@Published var allImages: [String: Image] = [:]

然后使用if语句检查图像是否不为零（在Xcode 12中，您也可以使用if-let）：

if self.post.imageContentURL != nil {
    self.imagesViewModel.allImages[self.post.imageContentURL!]?
        .resizable()
        .scaledToFill()
        .frame(width: 343,height: 171)
        .clipShape(Rectangle())
        .shadow(radius: 1)
        .border(Color.black,width: 1)
}

,

结果发现问题与nil或frame修饰符无关。

该图像实际上无形地延伸到.clipShape(Rectangle())的边界之外，并阻塞了NavigationLink。解决方案是结合使用.contentShape()和.clipped。

self.imagesViewModel.allImages[self.post.imageContentURL]?
    .resizable()
    .scaledToFill()
    .frame(width: 343,height: 171)
    .contentShape(Rectangle())
    .clipped()
    .shadow(radius: 1)

我从这里的帖子中发现了这个答案： Clipped Image calls TapAction outside frame

,

可能是实际的图像有问题，但是存在类型Image的SwiftUI视图。 Image更像UIImageView而不是UIImage，尽管将它看作是两者实际上并没有帮助。您可能想要的是：

    var body: some View {
        if imageView == nil {
            EmptyView()
        } else {
            imageView?
                .resizable()
                .scaledToFill()
                .frame(width: 343,alignment: .center)
                .clipShape(Rectangle())
                .shadow(radius: 1)
                .border(Color.black)
        }
    }

,

您可以简单地使用if-let（Xcode 12 +）：

if let image = self.imagesViewModel.allImages[post.imageContentURL]? {
    image
    .resizable()
    .scaledToFill()
    .frame(width: 343,alignment: .center)
    .clipShape(Rectangle())
    .shadow(radius: 1)
}