SwiftUI 视图以蓝色背景显示

Posted 2023-02-23

【中文标题】SwiftUI 视图以蓝色背景显示

【英文标题】：SwiftUI View displayed with blue background

【发布时间】：2019-11-05 14:50:23

【问题描述】：

我正在尝试重现 Apple 教程（组合复杂接口），但我遇到了一个非常奇怪的问题。我的CategoryItem 视图显示为蓝框。

如果我删除包裹它的NavigationLink，一切正常，但使用它就不行了。

struct CategoryRow: View 
    var categoryName: String
    var items: [Landmark]

    var body: some View 

        VStack(alignment: .leading) 
            Text(self.categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)

            ScrollView(.horizontal, showsIndicators: false) 
                HStack(alignment: .top, spacing: 0) 
                    ForEach(self.items)  landmark in
                        NavigationLink(
                            destination: LandmarkDetail(
                                landmark: landmark
                            )
                        ) 
                            CategoryItem(landmark: landmark)
                        
                    
                
            .frame(height: 185)
        
    

【问题讨论】：

从您发布的代码中很难辨别是什么导致了蓝色视图。下载并运行tutorial's complete code 可以按预期工作。我建议将已完成项目中的代码与我们自己的项目进行比较，使用差异工具，以便您了解差异在哪里以及可能导致错误的原因。

好吧，我检查了每一行，它的内容是一样的。我想一定是更新了

即使您将CategoryItem(landmark: landmark) 替换为诸如文本或图像之类的其他东西，它仍然是蓝色的

如果您运行已完成的项目，您会得到蓝色视图吗？另外您使用的是哪个版本的 Xcode？​​span>

在 CategoryItem 内的 Image 上调用 .renderingMode(.original) 有什么作用吗？对于文本，您可以尝试显式调用.foregroundColor(.black)。

【参考方案1】：

NavigationLink默认是蓝色的强调色，直接调用.accentColor(Color.clear)就可以了

或者你可以试试这个：

NavigationView 
    NavigationLink(destination: Text("Detail view here")) 
        Image("YourImage")
    
    .buttonStyle(PlainButtonStyle())

https://www.hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink

【参考方案2】：

renderingMode(.original) 是为我做的； .accentColor(Color.clear) 使图像不可见（我最好的解释是因为它没有透明度）。

NavigationView 
    NavigationLink(destination: Text("Detail view here")) 
        Image("YourImage")
            .renderingMode(.original)
    

正如上面提到的答案，How to disable the overlay color for images inside Button and NavigationLink 也是一篇不错的文章。