UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Apply 2 groups of modifiers to multiple text views ( aka create text styles ) ?

Forums > SwiftUI

I have multiple text views that need to be 1 of 2 styles.

      Text("Call the ambulance!")
          .background(.blue)
          .foregroundStyle(.green)
          .font(.custom("Times New Roman", size: 20))

      Text("Call the fire department!")
          .background(.red)
          .foregroundStyle(.yellow)
          .font(.custom("Courier", size: 20))

      Text("Call the police!")
          .background(.blue)
          .foregroundStyle(.green)
          .font(.custom("Times New Roman", size: 20))

      Text("Call the doctor!")
          .background(.red)
          .foregroundStyle(.yellow)
          .font(.custom("Courier", size: 20))

Is there a way to create an override to reduce the repeated coding?

// create myTextStyleA
// create myTextStyleB

            myTextStyleA("Call the ambulance!")

            myTextStyleB("Call the fire department!")

            myTextStyleA("Call the police!")

            myTextStyleB("Call the doctor!")

or

// define StyleA
// define StyleB

            Text("Call the ambulance!")
                .StyleA

            Text("Call the fire department!")
                .StyleB

            Text("Call the police!")
                .StyleA

            Text("Call the doctor!")
                .StyleB

I did already see the article at https://www.hackingwithswift.com/forums/swiftui/tip-use-of-extension-to-create-text-styles-for-a-consistent-look/6284 , but that method requires creating a separate Swift file - I was wondering if there's a way to do this within the ContentView.swift file ?

Thank you.

3      

You should be doing them as a separate View or a custom ViewModifier. That's the SwiftUI way.

See these two articles:

View composition

Custom modifiers

4      

I concur with @roosterboy, you should be trying to keep View as less cluttered as possible. By making a separate file it in one place that you can easily find and use in ANY views that you want the style. So if make a file called "MyStyleViewModifier" or what you want to call it and add this

enum Style {
    case one, two
}

fileprivate struct MyStyleViewModifier: ViewModifier {
    let style: Style

    func body(content: Content) -> some View {
        content
            .background(style == .one ? .blue : .red)
            .foregroundStyle(style == . one ? .green : .yellow)
            .font(style == .one ? .custom("Times New Roman", size: 20) : .custom("Courier", size: 20))
    }
}

extension View {
    func myStyle(_ style: Style) -> some View {
        modifier(MyStyleViewModifier(style: style))
    }
}

then you can do this

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Call the ambulance!")
                .myStyle(.one)

            Text("Call the fire department!")
                .myStyle(.two)

            Text("Call the police!")
                .myStyle(.one)

            Text("Call the doctor!")
                .myStyle(.two)
        }
        .padding()
    }
}

PS you can always overide anything eg .font( :) as long puy it before myStyle( :)

Text("Call the ambulance!")
      .font(.custom("Courier", size: 20))
      .myStyle(.one)

4      

@roosterboy + @NigelGee Thanks, I will make some ViewModifiers.

3      

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.