SwiftUI：导航链接中的自定义标签显示为灰色

Posted 2023-04-13

【中文标题】SwiftUI：导航链接中的自定义标签显示为灰色

【英文标题】：SwiftUI: Custom label in navigation link is greyed out

【发布时间】：2021-12-16 09:04:13

【问题描述】：

我正在尝试使用我的自定义卡片视图作为导航链接的标签。此导航链接也是一个 Grid 项。 结果是

我的卡号：

struct CityCard: View 
    var cityData: CityData
    
    var body: some View 
        VStack 
            Text("\(cityData.name)")
                .padding([.top], 10)
            Spacer()
            Image(systemName: cityData.forecastIcon)
                .resizable()
                .frame(width: 45, height: 45)
            Spacer()
            HStack(alignment: .bottom) 
                Text(String(format: "%.2f $", cityData.rate))
                    .padding([.leading, .bottom], 10)
                Spacer()
                Text(String(format: "%.2f °", cityData.degrees))
                    .padding([.trailing, .bottom], 10)
            
        .frame(width: 150, height: 150)
        .background(Color.blue)
            .cornerRadius(10)
            .navigationTitle(cityData.name)
    

我的列表视图：

struct CityList: View 
    var cities: [CityData]
    
    let columns = [
        GridItem(.flexible(minimum: 150, maximum: 150)),
        GridItem(.flexible(minimum: 150, maximum: 150))
        ]
    
    var body: some View 
        ScrollView 
            LazyVGrid(columns: columns, spacing: 20) 
                ForEach(self.cities)  item in
                    NavigationLink(destination: Text(item.name), label: 
                        CityCard(cityData: item)
                    )
                
            
        
    

有人有一个解决方案，为什么它会给我这种不透明性？

更新： 主要联系人视图是：

【参考方案1】：

它是灰色的，因为您的视图层次结构中还没有 NavigationView，这使得实际导航到新视图成为可能。

例如，您可以将ScrollView 包装在NavigationView 中：

var body: some View 
    NavigationView 
        ScrollView 
            LazyVGrid(columns: columns, spacing: 20) 
                ForEach(self.cities)  item in
                    NavigationLink(destination: Text(item.name), label: 
                        CityCard(cityData: item)
                    )
                
            
        
    

或者，如果它只发生在您的预览中，请将NavigationView 添加到您的预览代码中：

NavigationView 
  CityList(...)

请记住，如果您使用默认强调色（蓝色，浅色模式），您的链接将在蓝色背景之上变得不可见（因为它们将是蓝色）。您可以在项目中或通过accentColor 修饰符设置自定义强调色：

NavigationView 
    //content
.accentColor(.black)

【讨论】：

我在下面更新了我的问题，我把它包裹在导航视图中

请参阅我的回答部分，我解决了这个问题 - 请参阅以“请记住，如果您有默认的强调色”开头的段落

非常感谢！！