SwiftUI - How to wrap multiple Text views into a paragraph

Question

I want to keep each sentence in the paragraph it's own Text view, because it has unique functionality on hover. Currently I'm using the WrappingHStack from here.

WrappingHStack(1...6, id:\.self) {
    Text("This is number \($0). ")
}

This creates text like this:

This is number 1. This is number 2.      | // bounds
This is number 3. This is number 4.      |
This is number 5. This is number 5.      |

What I want is like this:

This is number 1. This is number 2. This 
is number 3. This is number 4. This is 
number 5. This is number 6.

What's the best way to achieve this?

EDIT:

More context on what I'm trying to achieve. Let's say I have two sentences: Does the seal work? and el sello funciona? When a user hovers on seal, I'd like to highlight sello(that logic I can implement as the two sentences are structured and broken down). Where i'm struggling is to get text to look like a regular block of text, but to have unique hover behaviour on the sentence/word level.

Use instead something to generate Text()+Text()+..., like for example in https://stackoverflow.com/a/62976651/12299030. Or prepare one concatenated string and use in single Text. — Asperi, Apr 25 '22 at 06:55
@Asperi But correct me if I'm wrong, doesn't this then require that the text functions only as a single `Text` view? I tried `Text("One").onHover {...} + Text("Two").onHover { ... }` and this doesn't work. `Text("One") + Text("Two")` achieves the visuals for what I want, but not the other functionality. — Peter R, Apr 25 '22 at 07:07
Then your question should be more precise about your scenario and intentions. Yes, Text+Text works only for texts, not for arbitrary views. — Asperi, Apr 25 '22 at 07:09
Essentially I want the equivalent of wrapping each sentence in a `` which can have it's own unique hover action. But I'm not sure how to go about this in SwiftUI. — Peter R, Apr 25 '22 at 07:09
@Asperi I'm not sure what's not precise about my intentions: `I want to keep each sentence in the paragraph it's own Text view, because it has unique functionality on hover.` — Peter R, Apr 25 '22 at 07:10
@Asperi I've added more context on what I'm trying to achieve. — Peter R, Apr 25 '22 at 07:23

score 1 · Answer 1 · answered Apr 25 '22 at 08:30

1

I'm not sure but you can try it

ZStack {
            (Text("title-1".localized)
                + Text("title-2".localized)
                + Text("title-3".localized))
                .modifier(TitleTextRegular(foregroundColor: .bronze, font: .title))
        }.frame(width: 800)

answered Apr 25 '22 at 08:30

sergio_veliz

149
9

This should be accepted. – lazarevzubov Aug 24 '23 at 08:47

score 0 · Answer 2 · answered Apr 25 '22 at 12:37

0

@peter you can achive Text as a paragraph by following code:

var varPara: String = ""
for index in 1...6 {
    varPara = varPara != "" ? varPara + " This is number \(index)." : " This is number \(index)."
}

Output: "This is number 1. This is number 2. This is number 3. This is number 4. This is number 5. This is number 6."

After that you need to assign string parameter to Text and then give highlight logic to Text.

answered Apr 25 '22 at 12:37

Zealous System

2,080
11
22

If I'm understanding this correctly, this just creates a longer string, which I can already do. What I'm trying to have is multiple Text components, that look like a paragraph, but function is a separate words/sentences/etc. – Peter R May 12 '22 at 10:31

SwiftUI - How to wrap multiple Text views into a paragraph

2 Answers2