当用户在文本字段中键入字符时，我想在每个新键入的字符上显示一些动画（有点像 Cash App 为数字设置动画的方式，但我也想为字母字符实现它）。
在 SwiftUI 中可以做到这一点吗？我的直觉是，我可能必须桥接到 UIKit 才能更细致地访问textfield的元素，但不确定如何实际实现它。
你可以创建一个“假”TextField出现在真实的之上。然后显示a中的字符ForEach.
它是用FocusState在 iOS 15 中
@available(iOS 15.0, *)
struct AnimatedInputView: View {
@FocusState private var isFocused: Int?
@State var text: String = ""
//If all the fonts match the cursor is better aligned
@State var font: Font = .system(size: 48, weight: .bold, design: .default)
@State var color: Color = .gray
var body: some View {
HStack(alignment: .center, spacing: 0){
//To maintain size in between the 2 views
Text(text)
.font(font)
.opacity(0)
.overlay(
//This textField will be invisible
TextField("", text: $text)
.font(font)
.foregroundColor(.clear)
.focused($isFocused, equals: 1)
)
.background(
ZStack{
HStack(alignment: .center, spacing: 0, content: {
//You need an array of unique/identifiable characters
let uniqueArray = text.uniqueCharacters()
ForEach(uniqueArray, id: \.id, content: { char in
CharView(char: char.char, isLast: char == uniqueArray.last, font: font)
})
})
}.opacity(1)
.minimumScaleFactor(0.1)
)
.onAppear(perform: {
//Bring focus to the hidden TextField
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
isFocused = 1
})
})
}
.padding()
.border(color)
.font(.title)
//Bring focus to the hidden textfield
.onTapGesture {
isFocused = 1
}
}
}
struct CharView: View{
var char: Character
var isLast: Bool
var font: Font
@State var scale: CGFloat = 0.75
var body: some View{
Text(char.description)
.font(font)
.minimumScaleFactor(0.1)
.scaleEffect(scale)
.onAppear(perform: {
//Animate only if last character
if isLast{
withAnimation(.linear(duration: 0.5)){
scale = 1
}
}else{
scale = 1
}
})
}
}
@available(iOS 15.0, *)
struct AnimatedInputView_Previews: PreviewProvider {
static var previews: some View {
AnimatedInputView()
}
}
//Convert String to Unique characers
extension String{
func uniqueCharacters() -> [UniqueCharacter]{
let array: [Character] = Array(self)
return array.uniqueCharacters()
}
func numberOnly() -> String {
self.trimmingCharacters(in: CharacterSet(charactersIn: "-0123456789.").inverted)
}
}
extension Array where Element == Character {
func uniqueCharacters() -> [UniqueCharacter]{
var array: [UniqueCharacter] = []
for char in self{
array.append(UniqueCharacter(char: char))
}
return array
}
}
//String/Characters can be repeating so yu have to make them a unique value
struct UniqueCharacter: Identifiable, Equatable{
var char: Character
var id: UUID = UUID()
}
这是一个示例版本。只接受数字，如计算器示例
import SwiftUI
@available(iOS 15.0, *)
struct AnimatedInputView: View {
@FocusState private var isFocused: Int?
@State var text: String = ""
//If all the fonts match the cursor is better aligned
@State var font: Font = .system(size: 48, weight: .bold, design: .default)
@State var color: Color = .gray
var body: some View {
HStack(alignment: .center, spacing: 0){
Text("$").font(font)
//To maintain size in between the 2 views
Text(text)
.font(font)
.opacity(0)
.overlay(
//This textField will be invisible
TextField("", text: $text)
.font(font)
.foregroundColor(.clear)
.focused($isFocused, equals: 1)
.onChange(of: text, perform: { value in
if Double(text) == nil{
//Leaves the negative and decimal period
text = text.numberOnly()
}
//This condition can be improved.
//Checks for 2 occurences of the decimal period
//Possible solution
while text.components(separatedBy: ".").count > 2{
color = .red
text.removeLast()
}
//This condition can be improved.
//Checks for 2 occurences of the negative
//Possible solution
while text.components(separatedBy: "-").count > 2{
color = .red
text.removeLast()
}
color = .gray
})
)
.background(
ZStack{
HStack(alignment: .center, spacing: 0, content: {
//You need an array of unique/identifiable characters
let uniqueArray = text.uniqueCharacters()
ForEach(uniqueArray, id: \.id, content: { char in
CharView(char: char.char, isLast: char == uniqueArray.last, font: font)
})
})
}.opacity(1)
.minimumScaleFactor(0.1)
)
.onAppear(perform: {
//Bring focus to the hidden TextField
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
isFocused = 1
})
})
}
.padding()
.border(color)
.font(.title)
//Bring focus to the hidden textfield
.onTapGesture {
isFocused = 1
}
}
}