I get an error when I try to create my own modifier for "textfield" in swiftUI

Question

I am trying to create my own modifier for "textfield" in swiftUI. I created the following modifier in extension.

extension TextField{
    public func LoginInputStyle(_ flg:String = "1") -> TextField{
        
        if(flg == "1"){
            return self.font(.system(size: 16, design: .rounded))
                .frame(maxWidth: 300)
                .textFieldStyle(RoundedBorderTextFieldStyle()) as! TextField<Label>
        }
        return self.font(.system(size: 16, design: .rounded))
            .frame(maxWidth: 300)
            .textFieldStyle(RoundedBorderTextFieldStyle()) as! TextField<Label>
    }
}


struct NewLogin: View {
    @State public var mail:String = ""
    var body:some View{
       VStack(){
          TextField("input mailaddress",text: $mail).LoginInputStyle()
       }
    }
}

When I build the modifier, it stops with the following error

「Could not cast value of type 'SwiftUI.ModifiedContent<SwiftUI.ModifiedContent<SwiftUI, SwiftUI._EnvironmentKeyWritingModifier<Swift.Optional<SwiftUI.Font>>, SwiftUI._FlexFrameLayout>, SwiftUI.TextFieldStyleModifier<SwiftUI.RoundedBorderTextFieldStyle>>' (0x7f9ea6833d48) to 'SwiftUI.TextField<SwiftUI.Text>' 」

How can I fix this? Thank you in advance.

workingdog support Ukraine · Accepted Answer · 2022-09-29 06:59:41Z

1

to create your own modifier try this approach, using ViewModifier:

struct NewLogin: View {
    @State public var mail: String = ""
    
    var body: some View {
       VStack() {
          TextField("input mailaddress",text: $mail)
               .modifier(TextFieldModifier(flg: "2"))
       }
    }
    
}

struct TextFieldModifier: ViewModifier {
    var flg: String = "1"
    
    func body(content: Content) -> some View {
        if(flg == "1") {
            content
                .font(.system(size: 16, design: .rounded))
                .frame(maxWidth: 300)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .foregroundColor(.blue)
        } else {
            content
                .font(.system(size: 16, design: .rounded))
                .frame(maxWidth: 300)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .foregroundColor(.red)
        }
    }

}

answered Sep 29, 2022 at 6:59

workingdog support Ukraine

38.9k5 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tanaka Over a year ago

Thanks for the quick and clear answer! I'm still trying to figure out how to write the above, but I've solved the error with no problem here! Thank you very much!

HunterLion · Accepted Answer · 2022-09-29 07:29:06Z

0

As an alternative to workingdog's answer, you can extend View to create the modifier - it saves you from writing "modifier" in your code.

The modifier:

extension View {
    
    @ViewBuilder
    func loginInputStyle(_ flg: String = "1") -> some View {
        
        if flg == "1" {
            self
                .font(.system(size: 16, design: .rounded))
                .frame(maxWidth: 300)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        } else {
            self
                .font(.system(size: 26, design: .rounded))
                .frame(maxWidth: 300)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
    }
}

In the calling view:

    @State public var mail:String = ""

    var body:some View{
       VStack {
           TextField("input mailaddress", text: $mail)
                .loginInputStyle()
           TextField("input mailaddress", text: $mail)
                .loginInputStyle("2")
       }
    }

answered Sep 29, 2022 at 7:29

HunterLion

4,1091 gold badge10 silver badges22 bronze badges

1 Comment

tanaka Over a year ago

Thanks for the quick and clear answer! I learned that it can be done by using ViewBuilder and extending to the View! And I was able to resolve the error here without any problem! Thank you very much!

Collectives™ on Stack Overflow

I get an error when I try to create my own modifier for "textfield" in swiftUI

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related