Home > front end >  I can't modify circular progress bar trim in SwiftUI
I can't modify circular progress bar trim in SwiftUI

Time:02-21

I'm making a math game and I'm trying to implement a circular progress bar, where I get errors. I'm not sure if I'm doing anything wrong, but I can't adapt it to the progress of the game, and that's what I want to do. Please look over my code down below...

    struct QuestionView: View {
        @State var show = false
        @State var showSheet: Bool = false
        @State var showSheetA: Bool = false
        @State var showSheet2: Bool = false
        
        @State private var correctAnswer = 0
        @State private var choiceArray: [Int] = [0, 1, 2, 3]
        @State private var firstNumber = 0
        @State private var secondNumber = 0
        @State private var difficulty = 100
        @State private var score = 0
        
        @State private var Background1 = "Background 1"
        @State private var Background2 = "Background 2"
        @State private var Background3 = "Background 3"
        @State private var Background4 = "Background 4"
        @State private var Background5 = "Background 5"
        @State private var Background6 = "Background 6"
        @State private var Background7 = "Background 7"
        @State private var Background8 = "Background 8"
        @State private var Background9 = "Background 9"
        @State private var Background10 = "Background 10"
        @State private var Background11 = "Background 11"
        @State private var Background12 = "Background 12"
        
        @State private var background = [
            "Background 1",
            "Background 2",
            "Background 3",
            "Background 4",
            "Background 5",
            "Background 6",
            "Background 7",
            "Background 8",
            "Background 9",
            "Background 10",
            "Background 11",
            "Background 12",
        ]
        
        @State var value = "0"
        let buttons: [[CalcButton]] = [
            [.clear, .negative, .percent, .divide],
            [.seven, .eight, .nine, .multiply],
            [.four, .five, .six, .subtract],
            [.one, .two, .three, .add],
            [.zero, .decimal, .equal]
        ]
        
        @State var currentOperation: Operation = .none
        @State var runningNumber = 0
        var body: some View {
            ZStack {
                Image("\(Background1)")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                    .blur(radius: 20)
                    .onAppear {
                        shuffle()
                    }
                VStack {
                    VStack(alignment: .leading) {
                        HStack {
                            HStack {
                                Circle()
//Where the problem is happening at the trim
                                    .trim(from: CGFloat(show ? Int(0.99) : answerIsCorrect(answer: correctAnswer)), to: 0.01)
                                    .stroke(LinearGradient(gradient: Gradient(colors: [Color.white, Color.white.opacity(0.2)]), startPoint: .topLeading, endPoint: .bottomTrailing), style: StrokeStyle(lineWidth: 17.5, lineCap: .round))
                                    .shadow(radius: 8)
                                    .rotationEffect(.degrees(90))
                                    .rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
                                    .frame(width: 60, height: 60)
                                    .animation(.easeOut)
                                    .padding()
                                    .padding([.top, .leading])
                                Spacer()
                            }
                            Button {
                                showSheet.toggle()
                            } label: {
                                VStack {
                                    ZStack {
                                        Rectangle()
                                            .fill(.thinMaterial)
                                            .frame(width: 80, height: 40)
                                            .cornerRadius(30)
                                            .padding(.top, 13)
                                            .padding(.trailing, 0)
                                        HStack {
                                            Image(systemName: "circle.grid.3x3.fill")
                                                .foregroundColor(.white)
                                                .font(.title3)
                                                .padding(.top, 13)
                                                .padding(.trailing, 0)
                                        }
                                    }
                                    Text("CALCULATOR")
                                        .font(.system(size: 11))
                                        .padding(.trailing, 0)
                                }
                            }
                            .halfSheet(showSheet: $showSheet) {
                                ZStack {
                                    Color.black.opacity(0.925).ignoresSafeArea()
                                    VStack {
                                        Spacer()
                                        // Text display
                                        HStack {
                                            Spacer()
                                            Text(value)
                                                .bold()
                                                .font(.system(size: 70))
                                                .foregroundColor(.white)
                                                .minimumScaleFactor(0.5)
                                        }
                                        .padding(.leading)
                                        .padding([.top, .trailing], 23)
                                        .padding(.bottom, 2)
                                        // Our Buttons
                                        ForEach(buttons, id: \.self) { row in
                                            HStack(spacing: 12) {
                                                ForEach(row, id: \.self) { item in
                                                    Button {
                                                        self.didTap(button: item)
                                                    } label: {
                                                        Text(item.rawValue)
                                                            .font(.system(size: 36))
                                                            .frame(width: self.buttonWidth(item: item), height: 55)
                                                            .scaledToFit()
                                                            .background(item.buttonColor)
                                                            .foregroundColor(.white)
                                                            .cornerRadius(95)
                                                    }
                                                }
                                            }
                                            .padding(.bottom, 0.55)
                                            .padding([.leading, .trailing], 20)
                                        }
                                    }
                                }
                            }
                            Button {
                                showSheet2.toggle()
                            } label: {
                                VStack {
                                    ZStack {
                                        Rectangle()
                                            .fill(.thinMaterial)
                                            .frame(width: 80, height: 40)
                                            .cornerRadius(30)
                                            .padding(.top, 13)
                                            .padding(.trailing, 28.5)
                                        HStack {
                                            Image(systemName: "book")
                                                .foregroundColor(.white)
                                                .font(.title3)
                                                .padding(.top, 13)
                                                .padding(.trailing, 28.5)
                                        }
                                    }
                                    Text("DICTIONARY")
                                        .font(.system(size: 11))
                                        .padding(.trailing, 25.5)
                                }
                            }
                            .halfSheet(showSheet: $showSheet2) {
                                ZStack {
                                    Home()
                                }
                            }
                        }
                        .padding(.top, 50)
                    }
                    VStack {
                        Text("Solve the following:")
                            .foregroundColor(.white)
                            .font(.title2)
                            .fontWeight(.medium)
                            .padding(.bottom, 24)
                        Text("\(firstNumber)   \(secondNumber)")
                            .foregroundColor(.white)
                            .font(.system(size: 60, design: .rounded))
                            .fontWeight(.medium)
                            .padding(.bottom, 28)
                            .onAppear {
                                generateAnswers()
                            }
                        VStack(alignment: .center, spacing: 0.01) {
                            LazyVGrid(columns: [GridItem(.adaptive(minimum: 150), spacing: 2.5)]) {
                                ForEach(0..<4, id: \.self) { index in
                                    Button {
                                        answerIsCorrect(answer: choiceArray[index])
                                        generateAnswers()
                                    } label: {
                                        AnswerButton(number: choiceArray[index])
                                    }
                                }
                            }
                            Spacer()
                        }
                        HStack {
                            Button {
                                
                            } label: {
                                ZStack {
                                    Rectangle()
                                        .fill(Color.white.opacity(0.5))
                                        .frame(maxWidth: 150, maxHeight: 50)
                                        .cornerRadius(15)
                                        .padding([.leading, .trailing])
                                    Image(systemName: "chevron.left")
                                        .font(.title)
                                }
                            }
                            Button {
                                showSheetA.toggle()
                            } label: {
                                VStack {
                                    ZStack {
                                        Rectangle()
                                            .fill(Color.white.opacity(0.5))
                                            .frame(maxWidth: 150, maxHeight: 50)
                                            .cornerRadius(15)
                                            .padding([.leading, .trailing])
                                        Image(systemName: "xmark")
                                            .font(.title)
                                            .foregroundColor(.red)
                                    }
                                }
                            }
                            ZStack {
                                Rectangle()
                                    .fill(Color.white.opacity(0.5))
                                    .frame(maxWidth: 150, maxHeight: 50)
                                    .cornerRadius(15)
                                    .padding([.leading, .trailing])
                                Image(systemName: "chevron.right")
                                    .font(.title)
                            }
                        }
                        .padding(.trailing, 6)
                        .padding(.bottom)
                        Spacer(minLength: 65)
                    }
                }
            }
        }
        func shuffle() {
            Background1 = background[Int.random(in: background.indices)]
            Background2 = background[Int.random(in: background.indices)]
            Background3 = background[Int.random(in: background.indices)]
            Background4 = background[Int.random(in: background.indices)]
            Background5 = background[Int.random(in: background.indices)]
            Background6 = background[Int.random(in: background.indices)]
            Background7 = background[Int.random(in: background.indices)]
            Background8 = background[Int.random(in: background.indices)]
            Background9 = background[Int.random(in: background.indices)]
            Background10 = background[Int.random(in: background.indices)]
            Background11 = background[Int.random(in: background.indices)]
            Background12 = background[Int.random(in: background.indices)]
        }
        func answerIsCorrect(answer: Int) {
            let isCorrect = answer == correctAnswer ? true : false
            
            if isCorrect {
                self.score  = 1
            } else {
                self.score -= 1
            }
        }
        func generateAnswers() {
            firstNumber = Int.random(in: 0...(difficulty/2))
            secondNumber = Int.random(in: 0...(difficulty/2))
            var answerList = [Int]()
            
            correctAnswer = firstNumber   secondNumber
            
            for i in 0...2 {
                answerList.append(Int.random(in: 0...difficulty))
            }
            
            answerList.append(correctAnswer)
            
            choiceArray = answerList.shuffled()
        }
        func didTap(button: CalcButton) {
            switch button {
            case .add, .subtract, .multiply, .divide, .equal:
                if button == .add {
                    self.currentOperation = .add
                    self.runningNumber = Int(self.value) ?? 0
                } else if button == .subtract {
                    self.currentOperation = .subtract
                    self.runningNumber = Int(self.value) ?? 0
                } else if button == .multiply {
                    self.currentOperation = .multiply
                    self.runningNumber = Int(self.value) ?? 0
                } else if button == .divide {
                    self.currentOperation = .divide
                    self.runningNumber = Int(self.value) ?? 0
                } else if button == .equal {
                    let runningValue = self.runningNumber
                    let currentValue = Int(self.value) ?? 0
                    switch self.currentOperation {
                    case .add:
                        self.value = "\(runningValue   currentValue)"
                    case .subtract:
                        self.value = "\(runningValue - currentValue)"
                    case .multiply:
                        self.value = "\(runningValue * currentValue)"
                    case .divide:
                        self.value = "\(runningValue / currentValue)"
                    case .none:
                        break
                    }
                }
                if button != .equal {
                    self.value = "0"
                }
            case .clear:
                self.value = "0"
            case .decimal, .percent, .negative:
                break
            default:
                let number = button.rawValue
                if self.value == "0" {
                    value = number
                } else {
                    self.value = "\(self.value)\(number)"
                }
            }
        }
        func buttonWidth(item: CalcButton) -> CGFloat {
            if item == .zero {
                return ((UIScreen.main.bounds.width - (4*12)) / 4) * 2
            }
            return (UIScreen.main.bounds.width - (5*12)) / 4
        }
        func buttonHeight() -> CGFloat {
            return (UIScreen.main.bounds.height - (5*12)) / 4
        }
    }
    
    struct AnswerButton: View {
        var number: Int
        var body: some View {
            ZStack {
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .fill(Color.white.opacity(0.6))
                    .frame(maxWidth: .infinity, minHeight: 110)
                    .cornerRadius(15)
                    .padding([.leading, .trailing], 10)
                    .padding(.top)
                    .padding(.trailing, 6)
                Text("\(number)")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .foregroundColor(.primary)
                    .padding([.leading, .trailing], 10)
                    .padding(.top)
                    .padding(.trailing, 6)
            }
        }
    }
    
    enum CalcButton: String {
        case one = "1"
        case two = "2"
        case three = "3"
        case four = "4"
        case five = "5"
        case six = "6"
        case seven = "7"
        case eight = "8"
        case nine = "9"
        case zero = "0"
        case add = " "
        case subtract = "-"
        case divide = "÷"
        case multiply = "×"
        case equal = "="
        case clear = "AC"
        case decimal = "."
        case percent = "%"
        case negative = " /-"
        
        var buttonColor: Color {
            switch self {
            case .add, .subtract, .multiply, .divide, .equal:
                return .orange
            case .clear, .negative, .percent:
                return .gray
            default:
                return Color(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1))
            }
        }
    }
    
    enum Operation {
        case add, subtract, multiply, divide, none
    }
    
    extension View {
        func halfSheet<SheetView: View>(showSheet: Binding<Bool>, @ViewBuilder sheetView: @escaping () -> SheetView) -> some View {
            return self
                .background(
                    HalfSheetHelper(sheetView: sheetView(), showSheet: showSheet)
                )
        }
    }
    
    struct HalfSheetHelper<SheetView: View>: UIViewControllerRepresentable {
      var sheetView: SheetView
      @Binding var showSheet: Bool
    
      class Coordinator {
        let dummyController = UIViewController()
        let sheetController: CustomHostingController<SheetView>
        init(sheetView: SheetView, showSheet: Binding<Bool>) {
          sheetController = CustomHostingController(rootView: sheetView, onDismiss: { showSheet.wrappedValue = false })
          dummyController.view.backgroundColor = .clear
        }
      }
      func makeCoordinator() -> Coordinator {
        return Coordinator(sheetView: sheetView, showSheet: $showSheet)
      }
      func makeUIViewController(context: Context) -> UIViewController {
        return context.coordinator.dummyController
      }
      func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        context.coordinator.sheetController.rootView = sheetView
    
        if showSheet && uiViewController.presentedViewController == nil {
          uiViewController.present(context.coordinator.sheetController, animated: true)
        }
      }
    }
    
    class CustomHostingController<Content: View>: UIHostingController<Content> {
      var onDismiss: (() -> Void)?
      convenience init(rootView: Content, onDismiss: @escaping () -> Void) {
        self.init(rootView: rootView)
        self.onDismiss = onDismiss
      }
    
      override func viewDidLoad() {
        if let presentationController = presentationController as? UISheetPresentationController {
          presentationController.detents = [
                .large(),
                .medium()
          ]
          presentationController.prefersGrabberVisible = true
        }
      }
    
      override func viewDidDisappear(_ animated: Bool) {
        onDismiss?()
      }
    }
    
    struct QuestionView_Previews: PreviewProvider {
        static var previews: some View {
            QuestionView()
        }
    }

Thank you for looking at my code. I look forward to your answer!

CodePudding user response:

struct ContentView: View {
    
    @State private var progress: Double = 0.1
    
    var body: some View {
        VStack {
            Circle()
                .trim(from: 0, to: progress)
                .stroke(lineWidth: 20)
                .rotationEffect(Angle(degrees: 180))
                .shadow(radius: 8)
                .rotationEffect(.degrees(90))
                .frame(width: 60, height: 60)
                .padding()
            
            Slider(value: $progress, in: 0...1)
                .padding()
        }
    }
}
  • Related