How can I create text in SwiftUI with NavigationLink (only some words from text)

Question

I'm working on SwiftUI application for iOS. I want to format text in this way, where blue words should be NavigationLinks. How the text should look:

I know that it is possible to implement UIKit into SwiftUI code. However, I don't understand how I can use UIKit in this way with normally working NavigationLinks.

Answer 1

Using this SO question as a base this is a solution. Left justified but an approach.

import SwiftUI
struct DynamicLinkTextView: View {
    let text: String = "I want text like this, with NavigationLinks to another View. However, this doesn't work"
    let wordsWLinks: [String] = ["this", "View"]
    @State var selection: String?
    var textArray: [String]{
        text.components(separatedBy: " ")
    }
    var body: some View {
        NavigationView{
            VStack{
                MultilineHStack(textArray){ text in
                    VStack{
                        if wordsWLinks.contains(text.removePunctiation()){
                            NavigationLink(text + " ", destination: Text("link =  \(text)"), tag: text as String, selection: $selection)
                        }else{
                            Text(text + " ").fixedSize()
                        }
                    }
                }
            }
        }
    }
}
//https://stackoverflow.com/questions/57510093/swiftui-how-to-have-hstack-wrap-children-along-multiple-lines-like-a-collectio
public struct MultilineHStack: View {
    struct SizePreferenceKey: PreferenceKey {
        typealias Value = [CGSize]
        static var defaultValue: Value = []
        static func reduce(value: inout Value, nextValue: () -> Value) {
            value.append(contentsOf: nextValue())
        }
    }
    
    private let items: [AnyView]
    @State private var sizes: [CGSize] = []
    
    public init<Data: RandomAccessCollection,  Content: View>(_ data: Data, @ViewBuilder content: (Data.Element) -> Content) {
        self.items = data.map { AnyView(content($0)) }
    }
    
    public var body: some View {
        GeometryReader {geometry in
            ZStack(alignment: .topLeading) {
                ForEach(self.items.indices) { index in
                    self.items[index].background(self.backgroundView()).offset(self.getOffset(at: index, geometry: geometry))
                }
            }
        }.onPreferenceChange(SizePreferenceKey.self) {
            self.sizes = $0
        }
    }
    
    private func getOffset(at index: Int, geometry: GeometryProxy) -> CGSize {
        guard index < sizes.endIndex else {return .zero}
        let frame = sizes[index]
        var (x,y,maxHeight) = sizes[..<index].reduce((CGFloat.zero,CGFloat.zero,CGFloat.zero)) {
            var (x,y,maxHeight) = $0
            x += $1.width
            if x > geometry.size.width {
                x = $1.width
                y += maxHeight
                maxHeight = 0
            }
            maxHeight = max(maxHeight, $1.height)
            return (x,y,maxHeight)
        }
        if x + frame.width > geometry.size.width {
            x = 0
            y += maxHeight
        }
        return .init(width: x, height: y)
    }
    
    private func backgroundView() -> some View {
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.clear)
                .preference(
                    key: SizePreferenceKey.self,
                    value: [geometry.frame(in: CoordinateSpace.global).size]
                )
        }
    }
}
struct DynamicLinkTextView_Previews: PreviewProvider {
    static var previews: some View {
        DynamicLinkTextView()
    }
}
extension String{
    func removePunctiation() -> String {
        self.trimmingCharacters(in: CharacterSet(charactersIn: ",."))
    }
}