swift - 使用 .onTapGesture 实现细节屏幕

Question

我正在开发应用程序。它创建了一个 Stacked Carousel Slider。Identifiable滑块中的项目从确认协议的数组中排列。使用的资产位于 xcassets 文件夹中。该应用程序主要由三个基本部分组成：

一个家（）。这是主要的轮播滑块视图。
b) Home() 上方有一个与 ZStack 分层的“阅读更多”按钮（参见：附图）
c) 在详细屏幕中，我创建了一些粗略的视图。一旦基本代码工作，我将详细实现这个屏幕。

我在 b) 中面临挑战。那就是我无法将“main”闭包变量传递给 .onTapGesture 的闭包。因此，我的“阅读更多”按钮不起作用。我猜，这是因为我接近数组的方式。我只粘贴下面的相关代码片段和屏幕截图，以便更好地参考。任何帮助将不胜感激。

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        Home()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct Home: View {
    
    var width = UIScreen.main.bounds.width - (40 + 60)
    var height = UIScreen.main.bounds.height/1.15
    @State var show = false
    @State var books = [
        
        // ensuring id in ascending Order....
        
        Book(id: 0, image: "p1", offset: 0),
        Book(id: 1, image: "p0", offset: 0),
        Book(id: 2, image: "p3", offset: 0),
        Book(id: 3, image: "p2", offset: 0),
        Book(id: 4, image: "p5", offset: 0),
        Book(id: 5, image: "p4", offset: 0),
    ]
    
    @State var swiped = 0
    @State var selectedIndex = 0
    @Namespace var name
    
    var body: some View{
        
        VStack{
            
           ZStack {
                
             ForEach(books.reversed()) { book in
                    ZStack {
                        Image(book.image)
                          .resizable()
                          .aspectRatio(contentMode: .fill)
                          .frame(width: width, height:getheight(index: book.id))  //  .frame(width: width, height: height)
                          .cornerRadius(25)
                          .shadow(color: Color.blue.opacity(0.5), radius: 5, x: 5)
                    
                        CardView(card: book)
                            .frame(width: width, height: getheight(index: book.id))
                            .onTapGesture{
                                withAnimation(.spring()){
                                 selectedIndex = book
                                    //error: Cannot assign value of type 'ReversedCollection<[Book]>.Element' (aka 'Book') to type 'Int'
                                    show.toggle()
                                }
                            }
                    }
                  .offset(x: book.id - swiped < 3 ? CGFloat(book.id - swiped) * 30 : 60)
                  //  print(swiped)
                    .padding(.vertical, 20)
                    .padding(.horizontal,40)
           //     }
                 .contentShape(Rectangle())
                 .padding(.horizontal,20)
                // .offset(x: (book.offset - 35))
                 .offset(x: book.offset)
                    .gesture(DragGesture().onChanged({ (value) in
                        withAnimation{onScroll(value: value.translation.width, index: book.id)}
                    }).onEnded({ (value) in
                        withAnimation{onEnd(value: value.translation.width, index: book.id)}
                    }))
                    
              }
          }.frame(height: height)
           .padding(.vertical, 50)
           .padding(.horizontal, 20)
            
            if show {
                VStack {
                    VStack {
                        HStack{
                            Button(action:{}) {
                                Image(systemName: "suit.heart")
                                    .font(.system(size: 22))
                                    .foregroundColor(.white)
                            }
                            Spacer()
                            
                            Button(action:{
                                
                                //closing hero view...
                                
                                withAnimation(.spring()){
                                 
                                    
                                    show.toggle()
                                }
                                
                                
                            }) {
                                
                                Image(systemName: "xmark")
                                    .font(.system(size: 22))
                                    .foregroundColor(.white)
                            }
                        }
                        Image("p\(selectedIndex)")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(height: 250)
                            .matchedGeometryEffect(id: "p\(selectedIndex)", in: name)
                            .rotationEffect(.init(degrees: 12))
                    }
                    
                }
              
                .background(Color.white)
            }
        }  .background(Color("bg").ignoresSafeArea(.all, edges: .all)) //
}

标签： swiftswiftui