๐EmojiTextFieldStyle
Last updated
Last updated
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())