为啥当附加到 nil 图像时，帧修饰符仍然会影响其他视图？

Posted 2023-02-24

【中文标题】为啥当附加到 nil 图像时，帧修饰符仍然会影响其他视图？

【英文标题】：Why does the frame modifier still affect other views when attached to nil image?为什么当附加到 nil 图像时，帧修饰符仍然会影响其他视图？

【发布时间】：2020-08-23 21:57:39

【问题描述】：

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) 上运行代码时，我遇到了相同的物理障碍，但在滚动视图元素之间增加了视觉间距。

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

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())
    

【参考方案1】：

正如您已经注意到的那样，.frame 修饰符不是图像特定的。即使图像是nil，它也可以工作。

你可以做的是检查Image是否可以加载。您可以使用UIImage(named:)（它返回一个 Optional）来做到这一点：

@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, height: 171, alignment: .center)
            ...
    

---

编辑

dict 中不需要可选的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)

【讨论】：

我都试过了，没有任何改变。我也在这里尝试了所有其他解决方案，但没有运气。

我已经解决了这个问题并在下面发布了答案。显然.clipShape() 只是在视觉上剪辑图像。

@Mark-4421 我只是用完全相同的答案更新我的帖子:)

@Mark-4421 不客气。在 SO 中表达感谢的最佳方式是点赞 :)

@Mark-4421 您也可以接受自己的答案，因为它可以解决您的问题。

【参考方案2】：

原来问题与nil 或框架修饰符无关。

该图像实际上已经超出了.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

【参考方案3】：

实际图像可能存在问题，但 Image 类型的 SwiftUI 视图存在。 Image 更像 UIImageView 而不是 UIImage，尽管将其视为两者都没有什么帮助。你可能想要的是：

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

【参考方案4】：

您可以简单地使用 if-let (Xcode 12+)：

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