Is it possible to add an in-line button within a Text()?

Question

trying to achieve something like tinder's Terms and Conditions, however i cannot figure it out how to make the Terms and Privacy Policy Clickable in swift UI

By creating an account or logging in, you agree to our Terms and Privacy Policy

var body: some View {
        Text(Constants.privacyText)
        .applyCustomLabelTextProperties(size: size, kerning: 2)
        .foregroundColor(color)
//        .lineLimit(2)
        +
        Text(" ")
        +
        Text(Constants.terms).underline()
            .foregroundColor(color)
//            .onTapGesture {
//                print("test")
//            }
        +
        Text(" and ")
            .foregroundColor(color)
        +
        Text(Constants.privacyPolicy).underline()
            .foregroundColor(color)
    }
}

Tried to make a clickable .onTapGesture applied on a Text() and also tried to add a button and concatenate it in the text, no success either.

Lacerated

I don't believe this is possible currently. I recommend wrapping a UILabel in a UIViewRepresentable. – Canea

also a very good idea, thanks! – Lacerated

Answer 1

It's already too late, but if this helps someone then I am glad :)

Try this,

var body: some View {
        VStack {
            Text("By creating an account you agree to our ")
            HStack {
                Button(action: { }){ Text("Terms").underline() }
                Text(" and ")
                Button(action: { }){ Text("Privacy Policy").underline()}
            }
        }
    }

Result:

Newark

While this does work here localizing this would be a nightmare and line wrapping won't work on small screens. – Femineity

Answer 2

In your case, you can simply use markdown in Text:

Text(try! AttributedString(markdown: "Please, agree to our [Terms and Conditions](https://apple.com)."))

This is the result:

Gynandry

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Offhand

Answer 3

A simple approach:

 Text("By creating an account you agree to our ")
 Button(action: { self.openPrivacyPage()}){ Text("Privacy Policy")}
  .buttonStyle(BorderlessButtonStyle())

You can further style the text and button with font sizes/types etc. Use HStack to keep on same line.

Which results in:

Gamba

Thanks @dot3. Not the most elegant solution but for the time being it seems the only way to do it in SwiftUI – Lacerated

Answer 4

Problem is when you have a dynamic text, a whole paragraph that should have a tappable image or text in the middle, not always in the same place. let us suppose you have a text that is imported dynamically and put in a location on a view. And you want to hi light a single word of interest and make tappable to give meaning or something. I have not yet found away to do this in SwiftUI.

let firstHalfOfParagraph = Text($importedStringBeforeWord)
let secondHalfOfParagraph = Text($importedStringAfterWord) 
let word = Text($importedWord)
return firstHalfOfParagraph + word.onTapGesture{print("action")} + secondHalfOfParagraph

This never works because word is now AnyView not Text, and it cannot be concatenated with Text! Hence the dilemma.

Siloam