如何将点击手势添加到串联 SwiftUI 文本视图的一部分？

Question

我正在开发一个 SwiftUI 视图，我需要连接两个文本视图，并仅使连接文本的一部分可点击。这是一个简化的示例。

Text("Hello, ") + Text("world!").bold()

我想添加一个点击手势，以便只有“世界！”部分是可点击的。但是，我知道在与 + 运算符连接后，文本变成单个文本视图，这使得将手势识别器添加到其中的一部分变得具有挑战性。

SwiftUI 中是否有一种方法可以将点击手势识别器仅添加到串联文本视图的一部分？或者是否有其他方法可以实现类似的布局，并且部分文本可点击？

我的最终目标是创建一个可切换的截断，如下所示：Spotify demo

Answer 1

适用于 iOS 15+ (Swift 5.5 +) 中的链接

Text("Hello, ") + Text("[World!](https://www.apple.com)").bold()

在那之前？呃，这是我能想到的保留所有文本格式的最佳方法。根据您的实际用例，您可能想要更改属性字符串的设置方式，这只是一个示例。但是，是的，它并不漂亮。

import DevKit
import SwiftUI

struct SwiftUIView: View {
    @State var attributedNonLink = {
        var attributedString = AttributedString("Hello, world!")
        let range = attributedString.range(of: " world!")!
        attributedString[range].foregroundColor = .clear
        return attributedString
    }()

    @State var attributedLink = {
        var attributedString = AttributedString("Hello, world!")
        let range = attributedString.range(of: "Hello, ")!
        attributedString[range].foregroundColor = .clear
        return attributedString
    }()

    var body: some View {
        ZStack {
            Text(attributedNonLink)
            Text(attributedLink).bold()
                .onTapGesture {
                    Log.info("Tap!")
                }
        }
    }
}

#Preview {
    SwiftUIView()
}