SwiftUI：NavigationLink使用自定义卡片作为标签出现灰化问题

问题根因 #

• NavigationLink默认会将内部标签识别为系统按钮样式，自动应用透明度变化、默认色调渲染效果，覆盖了你自定义的卡片背景样式，最终出现透明度异常的表现。
• 你将.navigationTitle修饰符错误写在了CityCard子视图内部，该修饰符仅对导航栈管理的页面根视图生效，放在子视图中会引发视图层级属性异常，也可能加重样式渲染的问题。

解决方案 #

1. 给NavigationLink添加.buttonStyle(PlainButtonStyle())修饰符，关闭系统默认的按钮样式渲染逻辑，保留你自定义的卡片样式。
2. 将CityCard中的.navigationTitle移动到导航栈对应的目标视图上，避免无效属性干扰视图渲染。

修改后的参考代码 #

修正后的CityCard代码

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

修正后的CityList中NavigationLink部分代码

ForEach(self.cities) { item in
    NavigationLink(destination: 
        Text(item.name)
            .navigationTitle(item.name)
        , label: {
        CityCard(cityData: item)
    })
    .buttonStyle(PlainButtonStyle())
}

如果需要保留点击反馈效果，可以自定义按钮样式替换PlainButtonStyle，比如实现点击缩放效果，不会引入透明度异常的问题。

内容的提问来源于stack exchange，提问作者Omri Shapira