我是SwiftUI的新手,处于学习模式。
我正在研究允许用户从日历中选择日期的代码。日历中的每一天都由一个文本字段表示。我希望在点击时更改所选日期的文本字段的背景颜色。我可以在视图首次加载时更改背景,但是,我无法找到一种方法来在点击时进行更改。感谢您的帮助。
import SwiftUI
var selectDay: Int = 0
struct ContentView: View {
@State var strDays = ["01","02","03","04","05","06","07"]
var body: some View {
VStack (spacing:10) {
HStack (spacing: 2) {
TextField("", text: $strDays[0])
.modifier(dayModifier())
.background(getBackgroundColor(thisDay: 0))
.onTapGesture {
self.selectDate(selection: 0)
}
TextField("", text: $strDays[1])
.modifier(dayModifier())
.background(getBackgroundColor(thisDay: 1))
.onTapGesture {
self.selectDate(selection: 1)
}
}
}
}
func selectDate(selection: Int) {
strDays[selection] = "99"
selectDay = selection
}
func getBackgroundColor(thisDay: Int) -> Color {
var backgroundColor = Color.clear
if selectDay == thisDay {
backgroundColor = Color.blue
}
return backgroundColor
}
struct dayModifier: ViewModifier {
func body(content: Content) -> some View {
return content
.frame(width: 50.0, height: 50)
.multilineTextAlignment(.center)
.foregroundColor(.primary)
.border(Color.primary, width: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/)
.disabled(true)
}
}
根据代码的逻辑,您需要Text
而不是TextField
,因此请在下面的固定和有效快照中查找。
使用Xcode 11.4 / iOS 13.4测试
struct ContentView: View {
@State var selectDay: Int = 0
@State var strDays = ["01","02","03","04","05","06","07"]
var body: some View {
VStack (spacing:10) {
HStack (spacing: 2) {
Text(strDays[0])
.modifier(dayModifier())
.background(getBackgroundColor(thisDay: 0))
.onTapGesture {
self.selectDate(selection: 0)
}
Text(strDays[1])
.modifier(dayModifier())
.background(getBackgroundColor(thisDay: 1))
.onTapGesture {
self.selectDate(selection: 1)
}
}
}
}
func selectDate(selection: Int) {
strDays[selection] = "99"
selectDay = selection
}
func getBackgroundColor(thisDay: Int) -> Color {
var backgroundColor = Color.clear
if selectDay == thisDay {
backgroundColor = Color.blue
}
return backgroundColor
}
struct dayModifier: ViewModifier {
func body(content: Content) -> some View {
content
.frame(width: 50.0, height: 50)
.multilineTextAlignment(.center)
.foregroundColor(.primary)
.border(Color.primary, width: 1)
}
}
}