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

Question

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

我的卡号：

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

有人有解决方案为什么它给我这种不透明度？

更新：主要联系视图是：

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

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

SwiftUI: Custom label in navigation link is greyed out

swiftui

swiftui-navigationlink

lazyvgrid

swiftui-navigationview