SwiftUI - 奇怪的动画

Posted 2023-02-24

【中文标题】SwiftUI - 奇怪的动画

【英文标题】：SwiftUI - Strange Animation

【发布时间】：2020-06-17 02:48:30

【问题描述】：

我有一个按钮的图像。预期结果是，当我单击按钮/图像时，其下方会出现一个项目列表。但是，由于某种原因，图像本身在单击时会缩小。我将如何防止图像缩小并仅将项目填充在图像下方？

struct HabitGroups: View 
    var imageName: String
    var textOverlay: String
    var listOfHabits: [String]
    @Binding var selectedHabitList: [String]
    @Binding var enoughHabits: Bool

    @State var showHabits = false

    var body: some View 
        VStack 
            Button(action: 
                withAnimation 
                    self.showHabits.toggle()
                
            ) 
                Image(self.imageName)
                    .resizable()
                    .scaledToFit()
                    .frame(minWidth: 300, minHeight: 100)
                    .overlay(ImageOverlay(textOverlay: self.textOverlay), alignment: .bottom)
            
            .buttonStyle(PlainButtonStyle())

            if self.showHabits 
                ForEach(self.listOfHabits, id: \.self)  habit in
                    AddHabitButtons(habit: habit, selectedHabitList: self.$selectedHabitList, enoughHabits: self.$enoughHabits)
                
            
        
    

Before Animation

After Animation

【参考方案1】：

您必须在图像下方放置许多项目以适应屏幕上所有内容的大小（因为您将所有内容都放在 VStack 上），因此图像会像 .resizalbe 一样缩小。

可能的解决方案是将习惯嵌入到滚动视图中，如下所示

if self.showHabits 
  ScrollView                                             // << here !!
    ForEach(self.listOfHabits, id: \.self)  habit in
        AddHabitButtons(habit: habit, selectedHabitList: self.$selectedHabitList, enoughHabits: self.$enoughHabits)
    
  

另一种方法是让图像按高度固定，但在这种情况下，显示的习惯会将其推离屏幕。但是预期的行为尚不清楚，无论如何都在这里

.buttonStyle(PlainButtonStyle())
.fixedSize(horizontal: false, vertical: true)           // << here !!

【讨论】：

我尝试了第二个。成功了。非常感谢！