> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/master/todo/custom-types/emojitextfieldstyle.md).

# EmojiTextFieldStyle

![💈 範例](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MKjXzrd7iwSSDMTLLdH%2F-MKjY3s3yvhBBSE5ZEHb%2FEmojiTextFieldStyle.png?alt=media\&token=75aecbfd-6b8e-4bd2-b3e5-f97162f1bd66)

{% tabs %}
{% tab title="👔 EmojiTextFieldStyle" %}

```swift
import SwiftUI

// 👔 EmojiTextFieldStyle (internal)
struct EmojiTextFieldStyle<Background: View>: TextFieldStyle {
    
    // ⭐️ style parameters
    var background : Background
    var borderColor: Color   = .black
    var borderWidth: CGFloat = 2
    var emoji      : String  = "🍀"
    
    let opacity    : Double  = 0.85
    
    // 🅿️ TextFieldStyle requirement
    public func _body(configuration: TextField<_Label>) -> some View {
        let w = borderWidth
        return configuration
            .shadow(color: .black, radius: 2, x: 0, y: 1)
            .padding(w+6, w+12, w+6, w+12)  // 🌀view.padding(_,_,_,_)
            .background(background)
            .overlay(
                ZStack(alignment: .trailing) {
                    Rectangle()
                        .stroke(borderColor, lineWidth: borderWidth*2) // border
                        .shadow(radius: 3, x: w, y: w+1)
                    Text(emoji)            // emoji
                        .opacity(opacity)  // emoji opacity
                        .shadow(radius: 3, x: 2, y: 2)
                        .offset(x: -w-6)
            }).clipped()
    }
}

// 🌀view.textFieldStyle()
extension View {
    
    // 🌀view.textFieldStyle(background:) 
    public func emojiTextFieldStyle<BG: View>(
        _ background : BG,
        borderColor: Color   = .black,
        borderWidth: CGFloat = 2
    ) -> some View {
        textFieldStyle(
            EmojiTextFieldStyle(
                background : background, 
                borderColor: borderColor, 
                borderWidth: borderWidth
            )
        )
    }//end
    
    // 🌀view.emojiTextFieldStyle() 
    public func emojiTextFieldStyle(
        _     emoji: String  = "🍀",
        _        bg: Color   = .orange,
        borderColor: Color   = .black,
        borderWidth: CGFloat = 2
    ) -> some View {
        textFieldStyle(
            EmojiTextFieldStyle(
                background : bg, 
                borderColor: borderColor, 
                borderWidth: borderWidth, 
                emoji      : emoji
            )
        )
    }
}
```

{% endtab %}

{% tab title="💈 範例" %}

```swift
import SwiftUI
import PlaygroundSupport

// 🖼 text field group 1
struct Fields1: View {
    
    // bindings
    @Binding var text : String
    @Binding var price: Int
    
    // view body
    var body: some View {
        VStack {
            // 👔 EmojiTextFieldStyle
            TextField("type something...", text: $text)
                .emojiTextFieldStyle(Gradient.right(.green, .blue))
            
            TextField("type something...", text: $text)
                .emojiTextFieldStyle("🍄", .yellow)
            
            TextField("type something...", text : $text)
                .emojiTextFieldStyle("🍏", .red)
            
            TextField(
                "type something...",
                value : $price,
                // ⭐️ value will not change if the format is invalid.
                // ⚠️ 但輸入小數時，會 crash ⁉️
                formatter: .currency              // 🌀Formatter
            ).emojiTextFieldStyle("🌼", .purple)
        }
    }
}

// 🖼 text field group 2
struct Fields2: View {
    // bindings
    @Binding var text: String
    // view body
    var body: some View {
        VStack {
            ForEach(0..<4) { i in
                // 👔 EmojiTextFieldStyle, 🌀Int + operator
                TextField("border width: \(2^^i)", text: self.$text)
                    .emojiTextFieldStyle(borderWidth: CGFloat(2^^i) )
            }
        }
    }
}

// 🖼 output view
struct Output: View {
    let text : String
    let price: Int
    var body: some View {
        HStack {
            ( Text("You entered: ").foregroundColor(.gray) 
                + Text(text).foregroundColor(.black)
                + Text(" $\(price)").foregroundColor(.blue) )
            Spacer()
        }.padding().border(Color.black)
    }
}

// 🖼 content view
struct ContentView: View {
    // view states
    @State private var text  = ""
    @State private var price = 99
    // view body
    var body: some View {
        VStack {
            Output(text: text, price: price)
            HStack(alignment: .top) {
                Fields1(text: $text, price: $price)
                Fields2(text: $text)
            }
        }.padding().background(Color.white)
    }
}

// live view
PlaygroundPage.current.setLiveView(ContentView())
```

{% endtab %}

{% tab title="📘 參考" %}

* [ ] [TextField in SwiftUI](https://swiftwithmajid.com/2020/02/26/textfield-in-swiftui/) - Swift with Majid
* [ ] 📗 SwiftUI by Tutorials, Ch.8 - Controls & User Input
  {% endtab %}

{% tab title="🌀 套件" %}

* 🌀view [.padding( )](/ios/swiftui/view/layout/.padding.md)
* [🌀 Formatter](/ios/custom/ext/formatter.md)
* [✖️ Operators](/ios/swift/op/operators.md)
  {% endtab %}

{% tab title="👥 相關" %}

* [🎛️ TextField](/ios/swiftui/control/textfield.md)
* [🌀 TextField + style](/ios/swiftui/control/textfield/styles/textfield-+-style.md)
  {% endtab %}
  {% endtabs %}