SwiftUI: More than 4 combined Text Views not working with view modifiers

Question

So I wanted to combine multiple text views in SwiftUI with different colors but it just got very complicated after adding a 5th Text View and adding a view modifier for the foreground and then it was giving me weird errors and saying to break up the view into distinct sub views.

struct dialogueBox: View {
    var body: some View {
        GroupBox {
            Group {
                Text("this").foregroundColor(.pink)
                + Text(" code ")
                + Text("works")
                + Text(" well ").foregroundColor(.green)

            }.font(.footnote)
             
             Group {
                Text("but").foregroundColor(.pink)
                + Text(" this ")
                + Text("code")
                + Text(" does ").foregroundColor(.green)
                + Text(" not ").foregroundColor(.blue)
                + Text(" for some reason ").foregroundColor(.red)

            }.font(.footnote)
        }
    }
}

I've seen this problem before and couldn't find a solution... but in iOS 15, you can use AttributedString instead: https://stackoverflow.com/a/67889368/14351818 — aheze, Jun 21 '21 at 02:07

score 2 · Accepted Answer · answered Jun 21 '21 at 05:15

You can create one var for text and then use it in Group.

struct DialogueBox: View {
    var body: some View {
        GroupBox {
            Group {
                Text("this").foregroundColor(.pink)
                    + Text(" code ")
                    + Text("works")
                    + Text(" well ").foregroundColor(.green)
                
            }.font(.footnote)
            
            Group {
                textView
                
            }.font(.footnote)
        }
    }
    
    private var textView: Text {
        Text("but").foregroundColor(.pink)
            + Text(" this ")
            + Text("code")
            + Text(" does ").foregroundColor(.green)
            + Text(" not ").foregroundColor(.blue)
            + Text(" for some reason ").foregroundColor(.red)
            + Text(" not ").foregroundColor(.blue)
            + Text(" for some reason ").foregroundColor(.red)
            + Text(" not ").foregroundColor(.blue)
            + Text(" for some reason ").foregroundColor(.red)
            + Text(" not ").foregroundColor(.blue)
            + Text(" for some reason ").foregroundColor(.red)
    }
}

this works perfectly and was such a smart approach, thanks! – peterk Jun 21 '21 at 14:52 — peterk, Jun 21 '21 at 14:52

score 0 · Answer 2 · answered Jun 21 '21 at 02:07

works well for me on macos 12.beta, xcode 13.beta, target ios 14.7 and macCatalyst 12. Tested on macOS 12 and iPhone ios 14.7.

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
struct ContentView: View {
    var body: some View {
        DialogueBox()
    }
}
struct DialogueBox: View {
    var body: some View {
        GroupBox {
            Group {
                Text("this").foregroundColor(.pink)
                + Text(" code ")
                + Text("works")
                + Text(" well ").foregroundColor(.green)

            }.font(.footnote)
             
             Group {
                Text("but").foregroundColor(.pink)
                + Text(" this ")
                + Text("code")
                + Text(" does ").foregroundColor(.green)
                + Text(" not ").foregroundColor(.blue)
                + Text(" for some reason ").foregroundColor(.red)

            }.font(.footnote)
            
            Group {
                Text("This ").foregroundColor(.pink)
                + Text(" is ")
                + Text("more")
                + Text(" stuff ").foregroundColor(.green)
                + Text(" and ").foregroundColor(.blue)
                + Text(" longer ").foregroundColor(.red)
                + Text(" still ").foregroundColor(.green)
                + Text(" more ").foregroundColor(.blue)
                + Text(" is more ")
                + Text(" more ").foregroundColor(.red)
                + Text(" and more ").foregroundColor(.blue)
            }.font(.footnote)
        }
    }
}

SwiftUI: More than 4 combined Text Views not working with view modifiers

2 Answers2