SwiftUI实现List行跳转至字符串存储的YouTube URL

问题说明 #

你尝试用NavigationLink将列表项跳转至字符串存储的YouTube URL，但报错，原因是NavigationLink的destination参数要求传入View类型，而非字符串或URL。需实现无需@State或@ObservableObject的跳转方案。

解决方案 #

以下两种简单方案均无需额外状态管理：

方法1：使用Button + 系统URL打开动作 #

用Button替代NavigationLink，在点击事件中调用系统API打开URL，保留原有列表项外观：

方法2：使用SwiftUI的Link组件（iOS 14+） #

Link是SwiftUI专为外部URL跳转设计的组件，直接传入URL即可，代码更简洁。

修改后的完整代码 #

方法1（Button实现） #

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(records, id: \.id) { record in
            Button(action: {
                if let url = URL(string: record.videourl) {
                    UIApplication.shared.open(url)
                }
            }) {
                HStack{
                    AsyncImage(url: URL(string: record.imagefile))
                        .cornerRadius(4)
                    Text(record.title)
                        .padding(3)
                        .font(.custom("AmericanTypewriter", fixedSize: 15))
                }
            }
        }
        .navigationTitle("CradleToGrave R")
        .navigationViewStyle(.stack)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack { // iOS 16+用NavigationStack，旧版本替换为NavigationView
            ContentView()
        }
    }
}

方法2（Link实现） #

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(records, id: \.id) { record in
            if let url = URL(string: record.videourl) {
                Link(destination: url) {
                    HStack{
                        AsyncImage(url: URL(string: record.imagefile))
                            .cornerRadius(4)
                        Text(record.title)
                            .padding(3)
                            .font(.custom("AmericanTypewriter", fixedSize: 15))
                    }
                }
            }
        }
        .navigationTitle("CradleToGrave R")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ContentView()
        }
    }
}

注意事项 #

• 确保record.videourl是完整的URL字符串（如https://www.youtube.com/watch?v=xxx），否则URL(string:)会返回nil，无法触发跳转。
• 若需兼容iOS 15及以下版本，将代码中的NavigationStack替换为NavigationView。

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