SwiftUI中实现内联文本链接跳转应用内部视图的技术问询

问题场景 #

在SwiftUI开发文本展示视图时，需要让文本中特定词语可点击并跳转至应用内其他视图。尝试用HStack{ Text("example text") Button("word"), action) Text("rest of example text") }的方式会彻底破坏文本的排版布局。

同时正在研究Attributed String，想确认能否通过自定义URL关联应用内目标视图，目前有两个核心疑问：

1. 实现该需求的最优方案是什么？
2. 点击URL后无法打开视图，是不是这种方式不可行？是否必须通过导航跳转？

原始代码示例 #

struct shortStoryView: View {
    @State var showPopUpScreen: Bool = false
    
    var body: some View {
        GeometryReader{ geo in
            ZStack{
                Image("homeWallpaper")
                    .resizable()
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)
                    .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
                    .opacity(1.0)
                
                testStory(showNewScreen: self.$showPopUpScreen).frame(width: 350, height:500).background(Color.white.opacity(0.75)).cornerRadius(20).overlay( RoundedRectangle(cornerRadius: 16)
                    .stroke(.gray, lineWidth: 6))
                .shadow(radius: 10)
                
            }
        }
    }
    
    struct testStory: View{
        @Binding var showNewScreen: Bool
        
        var body: some View{
            ScrollView(.vertical, showsIndicators: true) {
                    Text("Cristoforo Colombo [nasce](myappurl://action) nel 1451 vicino a Genova, nel nord Italia. A 14 anni diventa marinaio e viaggia in numerosi Paesi. Per Cristoforo Colombo la Terra è rotonda e verso la fine del ‘400, vuole viaggiare verso l’India e vuole farlo con un viaggio verso ovest. La spedizione è costosa e Colombo prima chiede aiuto al re del Portogallo e poi alla regina Isabella di Castiglia. Nel 1492, dopo mesi di navigazione, scopre però un nuovo continente: l’America, che viene chiamata il Nuovo Mondo. Cristoforo Colombo fa altri viaggi in America ma ormai non è più così amato e così muore nel 1506 povero e dimenticato da tutti.")
                        .modifier(textModifer())
                        .environment(\.openURL, OpenURLAction { url in
                            handleURL(url)
                        })
                }
            }
        
        func handleURL(_ url: URL) -> OpenURLAction.Result {
            popUpView()
            return .handled
        }
    }
    
    struct popUpView: View{
        @Environment(\.presentationMode) var presentationMode
        
        var body: some View{
            ZStack(alignment: .topLeading) {
                Text("Nascire - To be Born")
                    .font(Font.custom("Arial Hebrew", size: 20))
                    .background(Color.white.opacity(0.5))
                
                Button(action: { presentationMode.wrappedValue.dismiss()},
                       label: {
                    Image(systemName: "xmark")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                })
            }
        }
    }

解决方案 #

1. 最优实现方案：AttributedString + 自定义URL + 状态控制视图显隐 #

使用AttributedString是正确方向，既能保持文本排版完整，又能实现点击交互，核心逻辑：

• 给目标文本片段附加自定义URL Scheme（如myappurl://word?meaning=xxx）
• 用Text(attributedString)渲染带交互的文本
• 监听URL点击事件，通过状态变量控制弹窗/导航视图的显隐

2. 解决点击无反应的问题 #

你的代码存在两个关键错误导致点击无效：

• 直接创建View实例不会触发显示：handleURL里调用popUpView()只是生成了视图对象，没有将其加入当前视图层级，必须用状态变量控制显隐。
• Markdown文本的URL解析限制：用Markdown格式的[nasce](myappurl://action)可能存在解析异常，手动构建AttributedString更可靠。

修改后的完整代码

struct shortStoryView: View {
    @State private var showPopUp = false
    @State private var selectedWordMeaning = ""
    
    var body: some View {
        GeometryReader{ geo in
            ZStack{
                Image("homeWallpaper")
                    .resizable()
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)
                    .frame(width: geo.size.width, height: geo.size.height)
                
                testStory(showPopUp: $showPopUp, selectedMeaning: $selectedWordMeaning)
                    .frame(width: 350, height: 500)
                    .background(Color.white.opacity(0.75))
                    .cornerRadius(20)
                    .overlay(RoundedRectangle(cornerRadius: 16).stroke(.gray, lineWidth: 6))
                    .shadow(radius: 10)
                
                // 通过状态变量控制弹窗显隐
                if showPopUp {
                    popUpView(meaning: selectedWordMeaning, isPresented: $showPopUp)
                        .frame(width: 300, height: 150)
                        .background(Color.white)
                        .cornerRadius(16)
                        .shadow(radius: 10)
                        .transition(.scale)
                }
            }
        }
    }
    
    struct testStory: View{
        @Binding var showPopUp: Bool
        @Binding var selectedMeaning: String
        
        // 手动构建带自定义URL的AttributedString
        private var storyText: AttributedString {
            var str = AttributedString("Cristoforo Colombo nasce nel 1451 vicino a Genova, nel nord Italia. A 14 anni diventa marinaio e viaggia in numerosi Paesi. Per Cristoforo Colombo la Terra è rotonda e verso la fine del ‘400, vuole viaggiare verso l’India e vuole farlo con un viaggio verso ovest. La spedizione è costosa e Colombo prima chiede aiuto al re del Portogallo e poi alla regina Isabella di Castiglia. Nel 1492, dopo mesi di navigazione, scopre però un nuovo continente: l’America, che viene chiamata il Nuovo Mondo. Cristoforo Colombo fa altri viaggi in America ma ormai non è più così amato e così muore nel 1506 povero e dimenticato da tutti.")
            
            // 定位目标文本并添加交互属性
            if let range = str.range(of: "nasce") {
                str[range].link = URL(string: "myappurl://word?meaning=Nascire - To be Born")
                str[range].foregroundColor = .blue
                str[range].underlineStyle = .single
            }
            
            return str
        }
        
        var body: some View{
            ScrollView(.vertical, showsIndicators: true) {
                Text(storyText)
                    .modifier(textModifer())
                    .environment(\.openURL, OpenURLAction { url in
                        handleURL(url)
                        return .handled
                    })
            }
        }
        
        func handleURL(_ url: URL) {
            // 解析URL参数获取词语释义
            if let components = URLComponents(url: url, resolvingAgainstBaseURL: false),
               let meaning = components.queryItems?.first(where: { $0.name == "meaning" })?.value {
                selectedMeaning = meaning
                showPopUp = true
            }
        }
    }
    
    struct popUpView: View{
        let meaning: String
        @Binding var isPresented: Bool
        
        var body: some View{
            VStack(spacing: 20) {
                Text(meaning)
                    .font(Font.custom("Arial Hebrew", size: 20))
                
                Button(action: { isPresented = false }) {
                    Image(systemName: "xmark")
                        .foregroundColor(.gray)
                        .font(.title)
                }
            }
        }
    }
    
    // 自定义文本修饰符（示例）
    struct textModifer: ViewModifier {
        func body(content: Content) -> some View {
            content
                .font(.body)
                .padding()
        }
    }

核心改进点 #

• 状态变量控制视图：用@State var showPopUp管理弹窗的显示/隐藏，替代直接创建视图实例的错误方式。
• 手动构建AttributedString：精准控制目标文本的范围、样式和URL关联，避免Markdown解析的不确定性。
• URL参数传递数据：在自定义URL中携带业务数据（如词语释义），点击时解析参数并传递给目标视图。
• 正确的视图层级：将弹窗加入ZStack，通过状态变量控制其在视图树中的存在。

其他可选方案 #

如果需要更复杂的交互逻辑（如多词语跳转不同视图），还可以考虑：

• 用UITextView包装成UIViewRepresentable，利用UIKit的文本点击回调，但SwiftUI原生方案更简洁。
• 结合TapGesture和文本范围计算，但实现复杂度高，不推荐。

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