同一视图中的 SwiftUI 动画显示方式不同

Posted 2023-02-23

【中文标题】同一视图中的 SwiftUI 动画显示方式不同

【英文标题】：SwiftUI Animations in the same view are displayed differently

【发布时间】：2021-08-14 20:58:17

【问题描述】：

在第一部分没有问题，但在第二部分我的动画有问题。在第一部分和第二部分使用相同的视图。

在第二部分，文本左右移动。但我不想那样。我希望文本像第一部分一样保持稳定。

剖面视图：

(option == 1) = 图片在左边，文字在右边。 (option == 2) = 图片在右边，文字在左边。

struct SectionView: View 
    var title: String
    var imageView: AnyView
    var description: String
    var option: Int
    
    var body: some View 
        Group 
            if option == 1 
                HStack 
                    ZStack 
                        Rectangle()
                            .frame(width: 125, height: 120)
                            .foregroundColor(Color(UIColor.secondarySystemBackground))
                            .cornerRadius(40, corners: [.topRight, .bottomRight])
                        
                        imageView
                    
                    Spacer()
                    VStack 
                        Text(title)
                            .font(.system(size: 14, weight: .bold, design: .rounded))
                        Text(description)
                            .multilineTextAlignment(.center)
                            .font(.system(size: 12, weight: .medium, design: .rounded))
                            .padding(.trailing, 5)
                    
                    .frame(height: 120)
                    .foregroundColor(Color(UIColor.label))
                
             else if option == 2 
                HStack 
                    VStack 
                        Text(title)
                            .font(.system(size: 14, weight: .bold, design: .rounded))
                        
                        Text(description)
                            .multilineTextAlignment(.center)
                            .font(.system(size: 12, weight: .medium, design: .rounded))
                            .padding(.leading, 5)
                    
                    .frame(height: 120)
                    .foregroundColor(Color(UIColor.label))
                    Spacer()
                    ZStack 
                        Rectangle()
                            .frame(width: 125, height: 120)
                            .foregroundColor(Color(UIColor.secondarySystemBackground))
                            .cornerRadius(40, corners: [.topLeft, .bottomLeft])
                        
                        imageView

                    
                
            
        
    

MainViewModel：

我在这里添加部分。

如您所见，我在添加的两个 CategorySection 中使用了相同的视图。在第一部分中，动画正常显示，但在第二部分显示动画时，文本左右移动。这是什么原因？

class MainViewModel: ObservableObject 

    @Published var section: [CategorySection] = []

    init() 
        getSections()
    
    
    func getSections() 
        section = [
            
            CategorySection(title: "Trafik Levhaları", imageView: AnyView(PoliceSignsSectionIconView()), description: "Trafik levhaları trafiğe çıkan her sürücünün mutlaka dikkat etmesi gereken uyarı işaretleridir. Trafik kurallarını ve gerekliliklerini uygulama açısından önemli bir yeri olan trafik işaretleri mutlaka izlenmeli.  Bu bölümde trafik levha işaretlerinin anlamlarını öğrenebilirsiniz.", option: 1, page: TrafficSignsView()),
            
            CategorySection(title: "Polis İşaretleri", imageView: AnyView(PoliceSignsSectionIconView()), description: "Trafik polisleri gerektiği durumlarda yolda trafiğin kontrolünü sağlar. Çoğu yerde karşımıza çıkabilecek bu durumda trafik polisi işaretlerinin anlamını bilmemiz gerekmektedir. Bu bölümde polis işaretlerinin anlamlarını öğrenebilirsiniz.", option: 2, page: PoliceSignsView()),
....
            
        ]
    

CategorySection 模型：

struct CategorySection 
    let id = UUID()
    let title: String
    let imageView: AnyView
    let description: String
    let option: Int
    let page: Any

使用剖面视图：

我在这里使用我在 MainViewModel 中添加的部分。

struct MainView: View 
    @ObservedObject var mainViewModel: MainViewModel = MainViewModel()
    @EnvironmentObject var publishObjects: PublishObjects
    var body: some View 
        NavigationView 
            ScrollView(showsIndicators: false) 
                VStack(spacing: 30) 
                    ForEach(mainViewModel.section, id: \.id)  section in
                        NavigationLink(
                            destination: AnyView(_fromValue: section.page)?.navigationBarTitleDisplayMode(.inline),
                            label: 
                                SectionView(title: section.title, imageView: section.imageView, description: section.description, option: section.option)
                            )
                    
                
            
            .navigationBarTitle("Ehliyet Sınavım")
            .onAppear 
                
            
        
        .accentColor(Color(UIColor.label))
    

PoliceSignsSectionIconView（此处为动画）：

我在这个页面上应用了我的动画。

struct PoliceSignsSectionIconView: View 
    @State var isDrawing: Bool = true
    let pathBounds = UIBezierPath.calculateBounds(paths: [.policePath1, .policePath2, .policePath3, .policePath4, .policePath5, .policePath6, .policePath7, .policePath8, .policePath9, .policePath10])
    var body: some View 
        
        Text("Test Icon")
            .frame(width: 75, height: 70)
            .opacity(isDrawing ? 1 : 0)
            .onAppear 
                self.isDrawing.toggle()
            
            .animation(.easeInOut(duration: 2).repeatForever(autoreverses: true))
    

【问题讨论】：

这可能会有所帮助：***.com/a/68660932/14351818

【参考方案1】：

我解决了我的问题。我不知道为什么我添加 List 对象后问题就解决了。

主视图：

struct MainView: View 
    @ObservedObject var mainViewModel: MainViewModel = MainViewModel()
    @EnvironmentObject var publishObjects: PublishObjects
    var body: some View 
        NavigationView 
            List(mainViewModel.section, id: \.id)  section in
                
                    NavigationLink(
                        destination: AnyView(_fromValue: section.page)?.navigationBarTitleDisplayMode(.inline),
                        label: 
                            SectionView(title: section.title, imageView: section.imageView, description: section.description, sectionStatus: section.sectionStatus)
                        )
                
            
            .navigationBarTitle("Ehliyet Sınavım")
        
        
        .accentColor(Color(UIColor.label))