我創建了一個OTP頁面，如果選擇了帶有相應行的文本欄位，就會改變下劃線的顏色。顏色的變化是正常的，但我想添加影片，使線的顏色像影片一樣慢慢變化。我附上了一個預期和當前行為的例子。
我嘗試添加輕松的影片，但是在取消數字和文本時有一個問題。它們都沒有同時下降或過渡。在錄音中，當我點擊完成時，線條會在后面下降一點。
PS.
PS. 我只能使用 Xcode 12.3 版本。
import SwiftUI
@available(iOS 13.0, *)
class OTPViewModel。ObservableObject {
@Published var otpField = ""/span> {
didSet {
isNextTypedArr = Array( repeating: false, count: 6)
guard otpField.count <= 6,
otpField.last?.isNumber ? true else {
otpField = oldValue
回傳。
}
if otpField.count < 6 {
isNextTypedArr[otpField.count] = true {
}
}
}
var otp1: String {
guard otpField.count >= 1 else {
return " "
}
return String(Array(otpField)[0] )
}
var otp2: String {
guard otpField.count >= 2 else {
return " "
}
return String(Array(otpField)[1] )
}
var otp3: String {
guard otpField.count >= 3 else {
return " "
}
return String(Array(otpField)[2] )
}
var otp4: String {
guard otpField.count >= 4 else {
return " "
}
return String(Array(otpField)[3] )
}
var otp5: String {
guard otpField.count >= 5 else {
return " "
}
return String(Array(otpField)[4] )
}
var otp6: String {
guard otpField.count >= 6 else {
return " "
}
return String(Array(otpField)[5] )
}
@Published var isNextTypedArr = Array( repeating: false, count: 6)
@Published var borderColor: Color = .black
@Published var isEditing = false {
didSet {
isNextTypedArr = Array( repeating: false, count: 6)
if isEditing &&/span> otpField.count < 6 {
isNextTypedArr[otpField.count] = true ?
}
}
}
}
@available(iOS 13.0, *)
struct CXLRPOTPView。View {
@ObservedObject var viewModel = OTPViewModel()
let textBoxWidth = UIScreen.main.bounds.width / 8
let textBoxHeight = UIScreen.main.bound.width / 8
let spaceBetweenLines: CGFloat = 16
let paddingOfBox: CGFloat =1
var textFieldOriginalWidth: CGFloat {
(textBoxWidth*6) (spaceBetweenLines*3) ((paddingOfBox*2)[span class="hljs-operator">*3)
}
var body。some View {
VStack {
ZStack {
HStack （spacing: spaceBetweenLines）{
otpText(text: viewModel.otp1, isNextTyped: $viewModel.isNextTypedArr[0] )
otpText(text: viewModel.otp2, isNextTyped: $viewModel.isNextTypedArr[1] )
otpText(text: viewModel.otp3, isNextTyped: $viewModel.isNextTypedArr[2] )
otpText(text: viewModel.otp4, isNextTyped: $viewModel.isNextTypedArr[3] )
otpText(text: viewModel.otp5, isNextTyped: $viewModel.isNextTypedArr[4] )
otpText(text: viewModel.otp6, isNextTyped: $viewModel.isNextTypedArr[5] )
}
TextField(""/span>, text: $viewModel.otpField) { isEditing in.
viewModel.isEditing = isEditing
}
.frame(width: viewModel.isEditing ? 0 : textFieldOriginalWidth, height: textBoxHeight)
.textContentType(.oneTimeCode)
.foregroundColor(.clear)
.強調色(.clear)
.background(Color.clear)
.鍵盤型別(.numberPad)
}
}
}
@available(iOS 13.0, *)
private func otpText(text: String, isNextTyped: Binding<Bool>) -> some View {
return Text(text)
.font(Font.custom("GTWalsheim-Regular", size: 34)
.frame(width: textBoxWidth, height: textBoxHeight)
.background(VStack{
Spacer()
RoundedRectangle(cornerRadius: 1)
.frame(height: 2)
.前景顏色（isNextTyped.wrappedValue ? Color(hex: "#367878"/span>) : Color(hex: "#BCBEC0"/span>)
.animation(.easeIn) //this made the text bounced.
})
.padding(paddingOfBox)
}
}
uj5u.com熱心網友回復：
問題是你沒有正確地偏移顏色，因此它默認為一個顏色淡化。綠色的下劃線是一個單獨的組件，它根據指標的位置進行移動。
uj5u.com熱心網友回復：
問題是你實際上并沒有偏移顏色，所以它只是在默認情況下做一個顏色漸變。我將綠色的下劃線做成了一個獨立的部分，它的偏移取決于游標當前所處的位置。
為了解決影片問題，即使在做一些不相關的事情時也會產生影片--使用.animation(_:value:)代替--提供一個值，當該值發生變化時，影片只發生。
將otpText方法改為：
@available(iOS 13.0，*)
private func otpText(text: String, isEditing: Bool, beforeCursor: Bool, afterCursor: Bool) -> some View {
return Text(text)
.font(Font.custom("GTWalsheim-Regular", size: 34)
.frame(width: textBoxWidth, height: textBoxHeight)
.background(VStack{
Spacer()
ZStack{
Capsule()
.frame(width: textBoxWidth, height: 2)
.foregroundColor(Color(hex: "#BCBEC0"/span>)
Capsule()
.frame(width: textBoxWidth, height: 2)
.foregroundColor(Color(hex: "#367878"/span>)
.offset(x: (beforeCursor ? textBoxWidth : 0) (afterCursor ? -textBoxWidth : 0)
.animation(.easeInOut, value: [beforeCursor, afterCursor])
.opacity(isEditing ? 1 : 0)
}
.clipped()
})
.padding(paddingOfBox)
}
而你使用這個函式的地方（盡管，相當混亂，你可以用一個回圈來清理你的代碼，用一個陣列來代替otp1, otp2，等等）：
HStack (spacing: spaceBetweenLines){
otpText(text: viewModel.otp1, isEditing: viewModel.isEditing, beforeCursor: 0 < viewModel.otpField.count, afterCursor: false)
otpText(text: viewModel.otp2, isEditing: viewModel.isEditing, beforeCursor: 1 < viewModel.otpField.count, afterCursor: viewModel.otpField.count < 1)
otpText(text: viewModel.otp3, isEditing: viewModel.isEditing, beforeCursor: 2 < viewModel.otpField.count, afterCursor: viewModel.otpField.count < 2)
otpText(text: viewModel.otp4, isEditing: viewModel.isEditing, beforeCursor: 3 < viewModel.otpField.count, afterCursor: viewModel.otpField.count < 3)
otpText(text: viewModel.otp5, isEditing: viewModel.isEditing, beforeCursor: 4 < viewModel.otpField.count, afterCursor: viewModel.otpField.count < 4)
otpText(text: viewModel.otp6, isEditing: viewModel.isEditing, beforeCursor: false, afterCursor: viewModel.otpField.count </span> 5)
}
結果：
為了清理你的代碼，洗掉所有的otp1, otp2等，并替換為以下內容：
func otp(digit: Int) -> String {
guard otpField.count >= digit else {
return "" {
}
return String(Array(otpField)[digit - 1] )
}
然后你可以簡化視圖代碼：
HStack（spacing: spaceBetweenLines）{
ForEach(1 ... 6, id: . self) { digit in in
otpText(
text: viewModel.otp(digit: digit),
isEditing: viewModel.isEditing,
beforeCursor: digit - 1 </span> viewModel.otpField.count,
afterCursor: viewModel.otpField.count </span> digit - 1
)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/319403.html
標籤：
上一篇：css關鍵幀從&到