SwiftUI: How do style Text view with different font and colour on string subranges

Question

I want to style my Text view such that string it displays has different colours for each of 2 words. I know I can just use 2 x Text with different style. But then I should keep this string words in separate state variables. But I consider whether it is possible to define different .font().foregroundColor() for different parts of string.

There are also cases when there is longer lead and we want only first sentence or first word to be bolded, and remaining text to have regular font.

Any idea how to achieve this in SwiftUI?

Answer 1

You can alternate formatting on a String with a ForEach loop wrapped in an HStack, although that comes with its own issues. The following code will let you conditionally apply formatting based on the word's location in the string:

struct FancyTextView: View {

    let label: String

    var splicedLabel: [String] {
        return label.split(separator: " ").map(String.init)
    }

    var body: some View {
    
        HStack {
            ForEach(0..<splicedLabel.count, id: \.self) { index in
                Text(self.splicedLabel[index])
                    .fontWeight(index.isMultiple(of: 2) ? .bold : .regular)
                    .foregroundColor(index.isMultiple(of: 2) ? .blue : .red)
            }
        }
    
    }
}

Unfortunately, this simple solution doesn't work with longer strings:

I thought recursion might be useful, but I couldn't think of a way to use recursion with SwiftUI's Text() + Text() syntax.

Still, you could modify the above code to only format the first word with a larger font and then you could use the Text() + Text() syntax:

This also removes the unpleasant formatting of the HStack and ForEach combination with text. Just change the body to the following:

Text(splicedLabel[0] + " ")
        .font(.title)
        .fontWeight(.bold)
    + Text(splicedLabel[1])

If you use this example, make sure you change the maxSplits parameter in .split() to 1 and check to make sure that there are at least two strings in the resulting array.