点击后如何更改SwiftUI TextField样式? [英] How to change SwiftUI TextField style after tapping on it?

查看:74
本文介绍了点击后如何更改SwiftUI TextField样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我这样更改了TextField样式:

I changed TextField style like this:

TextField("Test", text: $name).textFieldStyle(CustomTextFieldStyle())

现在,我希望它在用户点击时更改样式.

now I want it to change style when user taps on it.

我的CustomTextFieldStyle定义为:

My CustomTextFieldStyle is defined as:

  public struct CustomTextFieldStyle : TextFieldStyle {
    public func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .font(.callout)
            .padding(10)
            .background(
                RoundedRectangle(cornerRadius: 4)
                    .strokeBorder(SBGreen, lineWidth: 2))
    }
}

推荐答案

TextField("Test", text: $name).textFieldStyle(tapflag ? CustomTextFieldStyle1() : CustomTextStyle2())

您有自己的TextStyle示例吗?请分享吧!

do you have an example of your own TextStyle? Please, share it!

更新

最好在样式中使用一些参数,并将其绑定到父"视图

you are better to use some parameter with your style and bind it to "parent" View

import SwiftUI

struct ContentView: View {

    @State private var email = ""
    @State private var editing = false
    var body: some View {
        TextField("Email", text: self.$email, onEditingChanged: { edit in
            self.editing = edit
        })
            .textFieldStyle(MyTextFieldStyle(focused: $editing)).font(.title).border(Color.blue)
    }
}

struct MyTextFieldStyle: TextFieldStyle {
    @Binding var focused: Bool
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
        .padding(10)
        .background(
            RoundedRectangle(cornerRadius: 10, style: .continuous)
                .stroke(focused ? Color.red : Color.gray, lineWidth: 3)
        ).padding()
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

结果看起来像

这篇关于点击后如何更改SwiftUI TextField样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆