👔EmojiTextFieldStyle

💈 範例

👔 EmojiTextFieldStyle

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
            )
        )
    }
}

💈 範例

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())

📘 參考

• TextField in SwiftUI - Swift with Majid
• 📗 SwiftUI by Tutorials, Ch.8 - Controls & User Input

🌀 套件

• 🌀view .padding( )
• 🌀 Formatter
• ✖️ Operators

👥 相關

• 🎛️ TextField
• 🌀 TextField + style