带有lazyhstack的滚动视图内奇怪的动画错误

Question

我在一个位于 Scrollview 内的lazyHStack 内有一个itemView() 的ForEach，

在 itemView 中，我有一个点击手势，将一个项目添加到数组中，然后运行 checkIfSelected() 函数，该函数会比较该项目是否被选中，如果是，您会看到一个复选标记并更改视图的背景并添加如您所见的轮廓。

另一部分是％折扣徽章，您可以看到某些折扣商品，问题是您可以看到折扣徽章在滚动时有点飞来飞去，然后设置它的去向。我使用 .transition 和 .animation，当然，复选标记不会发生这种情况，因为它始终存在，只是 .opacity 更改为 0，但因为我使用 .transition(.move(.top) ）在折扣徽章上，当出现复选标记时，您会看到它从上到下出现，它会相应地正确动画，当复选标记不存在时，反之亦然。

我尝试过不同的方法，但没有成功。

VStack(spacing:5) {
    LinearGradient.defaultOrangeRedGradient
        .mask(Image(systemName: "checkmark.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
        ).background( Circle().fill(Color.white).frame(width:20,height:20))
        .opacity(isSelected ? 1 : 0)
        .frame(width: 20, height: 20)
        .zIndex(4)

    
      
   
    
   if( item.isOffer) {
        VStack {
        Image( colorScheme == .dark ? item.isOfferIconDark : item.isOfferIcon)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width:20,height:20)
            .opacity(item.isOffer ? 1 : 0)
            //.transition(.opacity)
        }.transition(.move(edge: .top))
                .animation(.easeInOut(duration: 0.2))
                .zIndex(2)
        }
}

Answer 1

尝试将您的内容嵌入到 View.geometryGroup()。

将视图的几何形状（例如位置和大小）与其父视图隔离。

示例：

VStack {
    ....
}
.geometryGroup()

有关类似的问题和答案，请参阅 https://stackoverflow.com/a/79062620/4777830。