SwiftUI iOS 富有设计感的TextField之Kaede风格

实战需求

大家是不是觉得SwiftUI的文本框TextField风格有些单调呢，本文将给大家带来一套富有设计感的Kaede风格文本框

本文价值与收获

看完本文后，您将能够作出下面的界面

[e-mail]

Jietu20200607-095705.gif

看完本文您将掌握的技能

• 掌握定义Textfield风格方法
• 实现Textfield的动画效果

代码

1、主界面

import SwiftUI

struct ContentView: View {
    @State var text_name = ""
    @State var place_name = "用户名"
    @State var text_email = ""
    @State var place_email = "邮箱地址"
    var body: some View {
        VStack{
            Text("SwiftUI iOS 富有设计感的TextField")
            kaedeTF(text: self.$text_name, placeholder: self.$place_name)
                .frame(height:60)
                .border(Color.black)
                .cornerRadius(10)
                .padding()
            
            kaedeTF(text: self.$text_email, placeholder: self.$place_email)
                  .frame(height:60)
                             .border(Color.black)
                             .cornerRadius(10)
                             .padding()
           
        }
    }
}

2、kaede风格代码