LazyHStack 在滚动时切断内容

时间:2021-03-05 13:36:16

标签: ios swiftui

我有一个 LazyHStack 嵌套在 ScrollView 中,用于显示来自 API 的一些数据,但每次滚动它时,内容都会像这样被截断:

enter image description here

这是完整的结构:

struct MovieDetailView: View {
    @EnvironmentObject private var navStack: NavigationStack
    @ObservedObject var viewModel: MovieDetailVM
    
    init(viewModel: MovieDetailVM) {
        self.viewModel = viewModel
        //UIScrollView.appearance().bounces = false
    }
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .top) {
                ScrollView(showsIndicators: false) {
                    VStack {
                        GeometryReader { (proxy: GeometryProxy) in
                            if proxy.frame(in: .global).minY <= 0 {
                                Image(uiImage: (UIImage(data: viewModel.backdropData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_BACKDROP))!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: proxy.size.width, height: 330)
                            } else {
                                Image(uiImage: (UIImage(data: viewModel.backdropData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_BACKDROP))!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .offset(y: -proxy.frame(in: .global).minY)
                                    .frame(width: proxy.size.width, height: 330 + proxy.frame(in: .global).minY)
                            }
                        }
                        
                        VStack(alignment: .leading) {
                            FDDivider(height: 20)
                            
                            HStack {
                                Image(uiImage: (UIImage(data: viewModel.posterData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_POSTER))!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: 120, height: 180)
                                    .cornerRadius(20)
                                    .clipped()
                                
                                VStack(alignment: .leading) {
                                    Text(viewModel.title)
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 25).weight(.semibold))
                                        .foregroundColor(.SAPPHIRE)
                                        .padding([.top, .bottom], 12)
                                        .lineLimit(3)
                                    
                                    HStack {
                                        ForEach(viewModel.genres.prefix(2), id: \.ID) { genre in
                                            JWBorderPill(text: genre.name, textSize: 12, textColor: .SAPPHIRE, borderColor: .DANUBE)
                                        }
                                    }
                                }.padding([.leading], 10)
                                
                                Spacer()
                                    
                            }.padding([.leading, .trailing], 20)
                            
                            FDDivider(height: 20)
                            
                            HStack(spacing: 50) {
                                VStack {
                                    Text("Release Date")
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
                                        .foregroundColor(.gray)
                                        .padding([.bottom], 1)
                                    
                                    Text(viewModel.releaseDate)
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
                                }
                                
                                VStack() {
                                    Text("Duration")
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
                                        .foregroundColor(.gray)
                                        .padding([.bottom], 1)
                                    
                                    Text("\(viewModel.runtime)")
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
                                }
                                
                                VStack() {
                                    Text("Rating")
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
                                        .foregroundColor(.gray)
                                        .padding([.bottom], 1)
                                    
                                    Text("\(String(format: "%.1f", viewModel.voteAverage)) / 10")
                                        .font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
                                }
                            }.frame(width: geometry.size.width)
                            
                            VStack(alignment: .leading) {
                                Text("Overview")
                                    .font(Font.custom(JWConfig.FONT_ARIAL, size: 23).weight(.semibold))
                                    .foregroundColor(.SAPPHIRE)
                                    .padding([.top, .bottom], 8)
                                
                                Text(viewModel.overview)
                                    .font(Font.custom(JWConfig.FONT_ARIAL, size: 17))
                                    .foregroundColor(.gray)
                                
                                
                            }.padding([.leading, .trailing], 24)
                            
                            VStack(alignment: .leading) {
                                Text("Production Companies")
                                    .font(Font.custom(JWConfig.FONT_ARIAL, size: 23).weight(.semibold))
                                    .foregroundColor(.SAPPHIRE)
                                    .padding([.top], 8)
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    LazyHStack {
                                        ForEach(viewModel.productionCompanies, id: \.ID) { company in
                                            ProductionCompanyCell(viewModel: ProductionCompanyCellVM(company))
                                        }
                                    }
                                }
                            }.frame(height: 250)
                            .padding([.leading], 24)
                            
                            FDDivider(height: 400)
                            
                        }.frame(width: geometry.size.width)
                        .background(Color.white)
                        .cornerRadiusWithEachCorner(50, corners: [.topLeft, .topRight])
                        .offset(y: 180)
                    }
                }
                
                HStack {
                    JWBackButton()
                    Spacer()
                }.padding(EdgeInsets(top: 50, leading: 25, bottom: 0, trailing: 0))
                
            }
        }.edgesIgnoringSafeArea(.all)
    }
}

我的代码有问题吗?如果您需要完整的正文代码,请告诉我,我目前使用的是 Xcode 12.4

0 个答案:

没有答案