时间戳

首页 > 解决方案 > ScrollView 的 SwiftUI 动画

swiftui - ScrollView 的 SwiftUI 动画

问题描述

我在 ZStack 中有两个视图（VStack），一个在另一个之上

第二个视图后面的第一个 VStack 用作菜单。顶部的第二个视图是主应用程序视图。

当我单击一个按钮时，我正在缩小主视图并将其移动到屏幕右侧以显示菜单。

每次我缩小或放大主视图时，我在主视图内都有一个 ScrollView，动画无法顺利运行，页面闪烁，看起来很难看。如果我删除 ScrollView 它工作得很好。

我试图用 List 替换 ScrollView ，但它没有解决闪烁保持不变的问题。

有没有办法解决这个故障？

下面是一个示例代码

struct ContentView: View {
 var body: some View {

ZStack {

 Menu()

VStack {

  ScrollView(.vertical, showsIndicators: false) {

  VStack(spacing:0) {

     Header()

     MainAppView()

     }

  }

TabBar()

}

.scaleEffect(self.openMenu ? 0.5 : 1, anchor: UnitPoint(x: 1.5, y: 0.5))

.animation(.easeInOut(duration: 0.2))

}

}

}

请点击查看动画 gif 示例

标签： swiftui

解决方案

由于缺少代码，我无法重复所有行为。我认为您有这个问题，因为您正在缩小ScrollView并且它重新计算所有内容。尝试为它做一些偏移，而不是缩放，应该没有闪烁：

// replace this
.scaleEffect(self.openMenu ? 0.5 : 1, anchor: UnitPoint(x: 1.5, y: 0.5))

// with this:
.offset(x: self.openMenu ? 300 : 0)

推荐阅读