我有一个演示来演示我的问题,您可以在下面查看。我想要此SwipeBar更改主ContentView的背景颜色,但我不知道该怎么做。我之前使用过ObservableObject来完成类似的操作,但是View的类型不能为ObservableObject,因此我不确定如何使SwipeBar与创建它的ContentView“通信”。有什么办法吗?
此代码的作用的快速预览:https://imgur.com/gallery/JhomUmu
整个ContentView.swift:
import SwiftUI
struct ContentView: View {
@State var backGroundColor: Color = .purple
var body: some View {
VStack {
Spacer()
SwipeBar()
Spacer()
}.background(backGroundColor)
}
func changeBackgroundColor(color: Color) {
self.backGroundColor = color
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
整个SwipeBar.swift:
import SwiftUI
struct SwipeBar: View {
@State var draggedOffset = CGSize.zero
@State var greenOpacityLevel: Double = 0.3
@State var redOpacityLevel: Double = 0.3
var body: some View {
ZStack {
ZStack {
HStack {
ZStack {
RoundedRectangle(cornerRadius: 30, style: .continuous)
.fill(Color.green)
.frame(width: 100, height: 70)
Text("GREEN")
.padding(10)
.foregroundColor(.white)
.font(.system(size: 25))
}.padding(.leading, 20)
.opacity(self.greenOpacityLevel)
Spacer()
ZStack {
RoundedRectangle(cornerRadius: 30, style: .continuous)
.fill(Color.red)
.frame(width: 100, height: 70)
Text("RED")
.padding(10)
.foregroundColor(.white)
.font(.system(size: 25))
}.padding(.trailing, 20)
.opacity(self.redOpacityLevel)
}
ZStack {
RoundedRectangle(cornerRadius: 30, style: .continuous)
.fill(Color.blue)
.frame(width: 375, height: 70)
Text("SWIPE LEFT OR RIGHT")
.foregroundColor(.white)
.font(.system(size: 20))
}
.offset(x: self.draggedOffset.width)
.gesture(DragGesture(minimumDistance: 20, coordinateSpace: .local)
.onChanged { value in
self.draggedOffset = value.translation
if self.draggedOffset.width >= 120 {
self.greenOpacityLevel = 1.0
self.draggedOffset.width = 120
} else {
self.greenOpacityLevel = 0.4
}
if self.draggedOffset.width <= -120 {
self.redOpacityLevel = 1.0
self.draggedOffset.width = -120
} else {
self.redOpacityLevel = 0.4
}
}
.onEnded { value in
if self.draggedOffset.width <= -120 {
// Call the ContentView's changeBackGround function and pass in Color.red
print("background should change to red")
}
if self.draggedOffset.width >= 120 {
// Call the ContentView's changeBackGround function and pass in Color.green
print("background should change to green")
}
self.draggedOffset = CGSize.zero
self.redOpacityLevel = 0.4
self.greenOpacityLevel = 0.4
}
)
}
}
}
}
真正的问题在于代码的最后一部分。如何调用ContentView的功能来更改背景颜色?
if self.draggedOffset.width <= -120 {
// Call the ContentView's changeBackGround function and pass in Color.red
print("background should change to red")
}
if self.draggedOffset.width >= 120 {
// Call the ContentView's changeBackGround function and pass in Color.green
print("background should change to green")
}
答案 0 :(得分:0)
将SwipeBar
更改为Binding
到Color
:
struct SwipeBar: View {
@Binding var color: Color
...
,然后在color
中的适当位置更新SwipeBar
的值:
.onEnded { value in
if self.draggedOffset.width <= -120 { self.color = .red }
else if self.draggedOffset.width >= 120 { self.color = .green }
...
}
在ContentView
中,为Binding
属性创建一个backGroundColor
并将其传递给SwipeBar
:
SwipeBar(color: self.$backGroundColor)