微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

LazyVGrid 项目重叠

如何解决LazyVGrid 项目重叠

我需要一些帮助来理解为什么横向与我的 Swift LazyVGrid 重叠。这篇文章中提到了这个问题:https://swiftui-lab.com/impossible-grids/ 但我在我的代码中没有找到很好的解决方法

这是在模拟 iPhone 11 Pro 上纵向模式下的结果。一切看起来都很好。

portrait mode

然而,这是 iPhone 11 Pro 横向模式下的结果

landscape mode

重叠是问题,但我不确定如何添加适当的间距。卡片似乎没有一直流过列。

这里是对应的代码

SetGameView

struct SetGameView: View {
    @Observedobject var viewmodel : SetGameviewmodel
    
    var columnLayout = [GridItem(.adaptive(minimum: 50),spacing: 10),GridItem(.adaptive(minimum: 50),spacing: 10)]
    
    var body: some View {
        vstack {
            GeometryReader { geometryReader in
                ScrollView {
                    LazyVGrid(columns: columnLayout,spacing: 10) {
                        ForEach(viewmodel.inPlay) { card in
                            CardView(card: card)
                                .animation(.easeInOut(duration: 0.6))
                                .onTapGesture {
                                    withAnimation(.easeInOut(duration: 1)) {
                                        self.viewmodel.chooseCard(card: card)
                                    }
                                }
                                .scaleEffect(card.isSelected ? CGFloat(1.05) : 1)
                                .transition(.offset(CGSize(width: 0,height: geometryReader.size.height)))
                        }
                    }
                }
                .onAppear {
                    withAnimation {
                        self.viewmodel.dealInitialCards()
                    }
                }
            }
        }
    }
}

卡片视图

struct CardView: View {
    var card : SetCard
    var played = true
    
    var body: some View {
        ZStack {
            if card.isFaceUp {
                Rectangle()
                    .fill(Color.gray)
                    .overlay(
                        Rectangle()
                            .stroke(linewidth: linewidth)
                            .foregroundColor(.blue)
                            .opacity(card.isSelected ? 0.8 : 0)
                    )
                    .aspectRatio(aspectRatio,contentMode: .fill)
                    .opacity(0.3)
                
                CardfigureView(card: card)
                    .padding(padding)
                    .opacity(card.isFaceUp ? 1 : 0.1)
            } else {
                Image("BackCard").resizable().aspectRatio(aspectRatio,contentMode: .fill)
            }
        }
        .padding(padding)
    }
    
    private let linewidth: CGFloat = 1
    private let padding: CGFloat = 10
    private let aspectRatio: CGFloat = 2/3
}

先谢谢你!任何帮助表示赞赏。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。