SwiftUI - Multi line text followed by button

Question

How can we design multiline text followed by button. I tried with the following snippet, text and button are placed horizontal.

        HStack {
            
            Text("Very long text Very long text Very long text Very long text Very long text")
            
            Button {
                
            } label: {
                Text("Click here")
                Image(uiImage: UIImage.add)
            }
        }

Only Button should be clickable with click effect.

Expected OUTPUT

Does this answer your question? [Tappable Substrings In SwiftUI](https://stackoverflow.com/questions/76308018/tappable-substrings-in-swiftui) — lorem ipsum, Jun 26 '23 at 15:12

score 1 · Answer 1 · answered Jun 26 '23 at 16:04

This can be achieved by providing altered label to Button, as shown bellow.

Code:

var body: some View {
    VStack {
        Button(action: {
            let tosURL = URL.init(string: "https://www.google.com")! // add your link here
            if UIApplication.shared.canOpenURL(tosURL) {
                UIApplication.shared.open(tosURL)
            }
        }, label: {
            (Text("Very long text Very long text Very long text Very long text Very long text gte wkjeh ") +
             Text("Click here")
                .foregroundColor(.blue)
                .underline()
            )
            .frame(maxWidth: .infinity, alignment: .leading)
            .font(Font.system(size: 14, weight: .medium))
            .foregroundColor(Color.black)
            .fixedSize(horizontal: false, vertical: true)
        })
        .padding([.horizontal], 20)
    }
    .padding()
}

Result:

Thanks @bestiosdeveoper for taking time and answering. In our case only "Click here" should be clickable. When we add tapgesture to "Click here", it is not accepting as tapgesture return some views. — Ramgopal Reddy Bovilla, Jun 27 '23 at 02:01

SwiftUI - Multi line text followed by button

1 Answers1