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

Question

我正在尝试使用我的自定义卡片视图作为导航链接的标签。此导航链接也是一个 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)
                    })
                }
            }
        }
    }
}

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

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

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)