0

我有一个 PageTabViewStyle 用于显示图像。但是我想使用自定义进度条而不是点指示器,并且我想在用户滑动图像时增加我的自定义进度条。假设我有 5 张图片,如果用户幻灯片图像应该增加 1 / 5 。

在此处输入图像描述

如图所示,我创建了自定义的自定义 tabBar 和其他逻辑。但我找不到如何知道用户何时滑动图像的方法,或者有没有办法知道 PageTabViewStyle 的索引号。

struct ProductDetailInfo : View {

var productDetailData : ProductDetailData
@EnvironmentObject var productDetailViewModel : ProductDetailViewModel

var body: some View {
    
    TabView{
        
        if productDetailData.imageList == nil {
            
            WebImage(url : URL(string:productDetailData.image?.big ?? ""))
                .resizable()
                .aspectRatio(CGFloat(productDetailData.imageRatio ?? 1),contentMode: .fit)
            
        } else {
            
            ForEach(productDetailData.imageList ?? [] , id:\.id) { data in
                
                ZStack{
                    
                    Button(action: {
                        withAnimation(.easeInOut) {
                            
                            productDetailViewModel.selectedImages = productDetailData.imageList ?? []
                            productDetailViewModel.selectedImageId = productDetailData.id ?? ""
                            
                        }
                        
                    },label : {
                        
                        if productDetailData.imageRatio ?? 1 > 1 {
                            
                            ProductDetailImageCell(productDetailImageList: data, imageRatio: 1)
                            
                        } else if  productDetailData.imageRatio ?? 0.6 < 1 {
                            
                            if productDetailData.imageRatio ?? 0.6 < 0.6 {
                                
                                ProductDetailImageCell(productDetailImageList: data, imageRatio: 0.6)
                                
                            } else {
                                
                                ProductDetailImageCell(productDetailImageList: data, imageRatio: productDetailData.imageRatio ?? 1)
                                
                            }
                        }
                    }).buttonStyle(PlainButtonStyle())
                    
                }.offset(x: 0, y: UIScreen.main.bounds.height * -(0.10))
            }
        }
        
    }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
    
    
    .onAppear {
        
        DispatchQueue.main.async  {
            
            productDetailViewModel.percent = 0
            productDetailViewModel.percent += CGFloat((productDetailData.imageList ?? []).count)
            
        }
    }

这是我的自定义进度条;

结构进度条视图:查看 {

@EnvironmentObject var productDetail : ProductDetailViewModel


var body: some View {
    
    ZStack(alignment:.leading) {
        
        ZStack{
            
            Capsule()
                .fill(Color.black)
                .frame(width:self.callPercent(),height:6)
               
        }
        
        Capsule()
            .fill(Color.gray.opacity(0.5))
            .frame(width: 80, height: 6)
            
        
        
   }
    .padding(.top)
    .padding(.bottom,5)
    
    

}

func callPercent() -> CGFloat {
    
    let width = 80 / productDetail.percent
    
    print("width is  : \(width)")
    
    return width
    
}

}

4

0 回答 0