繁体   English   中英

根据 SwiftUI 中的另一个视图更改背景颜色?

[英]Changing background color based on another View in SwiftUI?

我有 WheelView 和 WheelBackground,第一个是一组圆角矩形,我用基于度数的拖动手势旋转,第二个是背景,也根据度数改变它的颜色,我希望这些背景颜色像我的正方形,例如红色方块,红色背面,绿色方块绿色背面等等......但我不知道如何根据度数更改这些颜色,有什么建议吗?

这是轮子: https ://imgur.com/a/N30ZkIe

这是我的代码:

struct WheelBackground: View {
    @Binding var degree: Double
    
    var body: some View {
        Color.orange
            .opacity(0.4)
            .ignoresSafeArea()
            .hueRotation(Angle(degrees: degree))
    }
}

struct ContentView: View {
    @State var degree = -90.0

var body: some View {
        ZStack {
            WheelBackground(degree: $degree)
            
            WheelView(degree: $degree)
                .rotationEffect(Angle(degrees: degree))
       }
   }
}

struct WheelView: View {
    @State var radius : Double = 150
    @State var direction = Direction.left
    @State var chosenIndex = 0
    // degree of circle and hue
    @Binding var degree : Double
    // @State var degree = -90.0
    let array : [myVal]
    let circleSize : Double
    
    var body: some View {
        ZStack {
            let anglePerCount = Double.pi * 2.0 / Double(array.count)
            let drag = DragGesture()
                .onEnded { value in
                    if value.startLocation.x > value.location.x + 10 {
                        direction = .right
                    } else if value.startLocation.x < value.location.x - 10 {
                        direction = .left
                    }
                }
            
            ZStack {
                ForEach(0 ..< array.count, id: \.self) { index in
                    let angle = Double(index) * anglePerCount
                    let xOffset = CGFloat(radius * cos(angle))
                    let yOffset = CGFloat(radius * sin(angle))
                    
                    RoundedRectangle(cornerRadius: 20, style: .continuous)
                        .fill(array[index].color)
                        .rotationEffect(Angle(radians: angle + Double.pi/2))
                        .offset(x: xOffset, y: yOffset)
                }
            }
            .rotationEffect(Angle(degrees: degree))
            .gesture(drag)
            .onAppear() {
                radius = circleSize/2 - 47
            }
        }
    }
}

请参阅您的问题和评论,因为您无法提供 WheelView() 的代码,这是我可以制作的最接近的复制视图来演示您的问题的解决方案。 此代码侧重于您希望backgroundsquare在颜色更改时具有相同颜色的逻辑。

试试下面的代码:

struct TestContentView: View {
let allColors = [Color.red, Color.blue, Color.green, Color.orange, Color.purple, Color.pink]
@State var color = Color.red
var body: some View {
    ZStack {
        WheelBackgroundExample(color: $color)
        VStack {
            WheelViewExample(color: $color)
            Button("change") {
                color = allColors[Int.random(in: 0...5)]
            }
            .foregroundColor(.black)
        }
        
    }
}
}

struct WheelViewExample: View {
@Binding var color: Color
var body: some View {
    Rectangle()
        .fill(color)
        .frame(width: 200, height: 200)
        .border(.black)
}
}

struct WheelBackgroundExample: View {
@Binding var color: Color
var body: some View {
    Rectangle()
        .fill(color)
}
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM