Question

struct Flashcard: View {
  @State var tangoID = randomNum
  @State var refreshToggle = false
  @State var showingSheet = false
  @State var bookmarked = tangoArray[randomNum].bookmark
  @State public var showingNoMoreCardsSheet = false


  @State private var showResults: Bool = false
  @State private var fullRotation: Bool = false

  var body: some View {
    let zstack = ZStack {

      Frontside(id: $tangoID, sheet: $showingSheet, rotate: $fullRotation)
        .rotation3DEffect(.degrees(self.showResults ? 180.0 : 0.0), axis: (x: 0.0, y: 1.0, z: 0.0))
        .rotation3DEffect(.degrees(self.fullRotation ? 360.0 : 0.0), axis: (x: 0.0, y: 1.0, z: 0.0))
        .zIndex(self.showResults ? 0 : 1)


      Backside(id: $tangoID, sheet: $showingSheet, bookmark: $bookmarked, results: $showResults, rotate: $fullRotation)
        .rotation3DEffect(.degrees(self.showResults ? 0.0 : 180.0), axis: (x: 0.0, y: -1.0, z: 0.0))
        .rotation3DEffect(.degrees(self.fullRotation ? 360.0 : 0.0), axis: (x: 0.0, y: 1.0, z: 0.0))
        .zIndex(self.showResults ? 1 : 0)

    }
    .actionSheet(isPresented: $showingSheet) {
      ActionSheet(title: Text("Finished 終わり"), message: Text("お疲れさま！ But feel free to keep going."), buttons: [.default(Text("はい"))]);
    }
    .onTapGesture {
      self.handleFlipViewTap()
    }
    .navigationBarTitle("Study")
    .contextMenu(menuItems: {Button(action: {
      tangoArray[randomNum].bookmark.toggle()
      database.updateUserData(tango: tangoArray[randomNum])
      self.fullRotation.toggle()
    }, label: {
      VStack{
        Image(systemName: tangoArray[randomNum].bookmark ? "bookmark" : "bookmark.fill")
          .font(.title)
        Text(tangoArray[randomNum].bookmark ? "Remove bookmark" : "Bookmark")
      }
    })
    })

    return zstack
  }



  private func handleFlipViewTap() -> Void
  {
    withAnimation(.linear(duration: 0.25))
    {
      self.showResults.toggle()
    }
  }
}
    public struct Frontside: View  
    {  
      @Binding public var id: Int  

      public var body: some View  
      {  
        ZStack{  


          RoundedRectangle(cornerRadius: 8, style: .continuous)    
            .frame(width: 140, height: 149)  
            .zIndex(0)  

          VStack {  
            Text(tangoArray[self.id].kanji)  

            .font(.system(size: 24))  


            .fontWeight(.regular)  
            .padding(25)  
            .lineLimit(3)   
            .zIndex(1)  

            Spacer()  
          }  

          VStack {  
            Spacer()  
            HStack {  

              Button(action: {  
                incorrect(i: self.id)  
                checkAttempts()  
                self.id = nextCard()   
              }) {  
                Image(systemName: "xmark")  
                  .font(.headline)  
                  .opacity(0.4)  

              }  

              Button(action: {  
                correct(i: self.id)  
                checkAttempts()  
                self.id = nextCard()   
              }) {  
                Image(systemName: "circle")  
                  .font(.headline)  
                  .opacity(0.4)  

              }  

            }  
          }  
          .zIndex(2)  
        }  
      }  
    }  

I have a view which is a flashcard. When the user taps on the incorrect button I want the flash card to slide to the left of the screen, and when the user taps on the correct button I want the flash card to transition/slide to the right of the watch screen. How do I do that?

Answer 1

当用户点击不正确的按钮时，我希望闪存卡滑动到屏幕的左侧，当用户点击正确的按钮，我想让闪存卡过渡/滑动到右侧观看屏幕

我创建了一个最小的可行示例，向您展示了可能的解决方案。看看并告诉我是否可以为您提供更多帮助。

struct ContentView: View {
    private let objWidth = CGFloat(100)
    private let objHeight = CGFloat(200)
    private let screenWidth = UIScreen.main.bounds.size.width;
    private let screenHeight = UIScreen.main.bounds.size.height;
    @State private var objOffset = CGFloat(50)

    var body: some View {
        VStack {
            Rectangle()
                .frame(width: objWidth, height: objHeight)
                .background(Color.black)
                .position(x: objOffset, y: (screenHeight-objHeight)/2.0)
            Button(action: {
                withAnimation{
                    self.move()
                }
            }) {
                Text("TAP")
            }
        }
    }

    private func move() {
        if objOffset > screenWidth/2.0 {
            objOffset = objWidth/2.0
        } else {
            objOffset = screenWidth-objWidth/2.0
        }
    }
}

SwiftUI幻灯片过渡

1 个答案: