如何为Alert内的NavigationLink设置红色或.destructive样式？

SwiftUI 原生 .alert 的操作按钮区域由系统托管渲染，仅会对闭包内传入的标准Button组件的role属性做样式适配。直接在alert闭包中写入NavigationLink时，系统不会将其识别为标准alert操作按钮，因此既不支持设置role属性，直接修改前景色的代码也会被系统样式覆盖无法生效，部分系统版本下还可能出现点击失效、布局异常的问题。

不要将NavigationLink直接写在.alert的闭包内，改用「状态驱动跳转」的思路实现：

• 新增独立的状态变量控制页面跳转逻辑
• 在alert闭包内仅放入原生支持的Button组件，给跳转按钮设置.destructive role，即可自动匹配系统原生的红色destructive按钮样式
• 将负责跳转的NavigationLink放在和alert同层级的视图结构中，绑定跳转状态，点击alert按钮时修改状态触发跳转即可

import SwiftUI

struct ContentView: View {
    // 控制alert弹窗显示
    @State private var isPro = false
    // 控制跳转到播放页
    @State private var navigateToPlay = false
    
    var body: some View {
        NavigationStack {
            // 你的主视图内容
            Button("唤起弹窗") {
                isPro = true
            }
            .alert("Proceed to play?", isPresented: $isPro) {
                // 原生destructive按钮，自动显示为红色
                Button("Play", role: .destructive) {
                    navigateToPlay = true
                }
                // 取消按钮自动适配系统样式
                Button("Cancel", role: .cancel) {}
            }
            // 跳转用的NavigationLink放在视图层级中，隐藏不占用布局
            .background {
                NavigationLink(
                    destination: MyPlay(),
                    isActive: $navigateToPlay
                ) { EmptyView() }
                    .hidden()
            }
        }
    }
}

// 目标跳转页面
struct MyPlay: View {
    var body: some View {
        Text("播放页")
    }
}

如果适配iOS16+系统，也可以配合NavigationStack的navigationDestination修饰符实现跳转，逻辑完全一致：点击alert的destructive按钮后修改导航路径状态触发跳转即可，不需要额外写隐藏的NavigationLink。

内容的提问来源于stack exchange，提问作者Steven-Carrot