时间戳

首页 > 解决方案 > 如何在 SwiftUI 中通过动画使背景消失？

swift - 如何在 SwiftUI 中通过动画使背景消失？

问题描述

我有这段代码可以在我的应用程序中显示子视图

if showContent {
            ZStack {
                ContentView(name: "", showAddWindow: false, title: $curLName)
                VStack {
                    HStack {
                          Button(action: {
                            withAnimation {
                                    self.showContent.toggle()
                            }
                          }) {
                            Image(systemName: "xmark.circle.fill").font(.title)
                            Spacer()
                          }.padding(.leading, 20)
                    }
                    Spacer()
                }
                .padding(.top,15)
            }
            .background(darkMode ? Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)) : Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
            .animation(.default)
            .transition(.move(edge: .trailing))
        }

出于某种原因，背景消失了，根本没有动画，而子视图的所有其他元素都有动画，至少可以说看起来很糟糕。我该如何解决？UPD：问题视频：视频

即使在不是由子视图绘制的窗口上，同样的问题仍然存在

if showAddWindow {
            VStack {
                Text("Добавить список")
                    .font(.title)
                    .padding(5)
                TextField("Введите название", text: $lName)
                    .padding(.horizontal,25)
                Divider()
                HStack {
                    Button(action: {
                        if lName != "" {
                            allists.insert(element(name:lName),at:0)
                            lName=""
                            saveNamesList()
                        self.showAddWindow.toggle()
                        }}, label: {
                        Text("ОК")
                            .padding(.vertical,6)
                            .padding(.horizontal,56)
                })
                    Divider()
                    Button(action: {
                        lName=""
                        self.showAddWindow.toggle()
                    }, label: {
                        Text("Отмена")
                            .padding(.vertical,6)
                            .padding(.horizontal,40)
                })
                }
            }
            .frame(width:300, height:140)
            .background(darkMode ? Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)) : Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
            .clipShape(RoundedRectangle(cornerRadius:25,style: .continuous))
            .shadow(radius:15)
            .transition(AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: .move(edge:.trailing)))
            .animation(.default)
        }

标签： swiftanimationswiftui

解决方案

假设您希望颜色仅在暗模式/亮模式更改时更改：

根据我的经验，以编程方式更改暗模式/亮模式的颜色在 SwiftUI 中效果不佳。相反，您应该在 assets 文件夹中声明对暗模式友好的颜色并使用这些颜色。当用户从浅色模式更改为深色模式时，您还将免费获得一些漂亮的动画。

还有其他方法，但我发现这种方法足够好。这是一篇关于如何定义动态颜色等的有用帖子：https ://medium.com/@drevathy/dark-theme-for-ios-13-in-swift-efc62ef6d16e

编辑：关于过渡不起作用，我在另一个 stackoverflow 问题中找到了解决方案。
基本上，您需要.zIndex([A Sufficient Number Here])在视图末尾应用 a ，然后到达if showContent { }. 就像是：

if showContent {
            ZStack {
                ContentView(name: "", showAddWindow: false, title: $curLName)
                VStack {
                    HStack {
                          Button(action: {
                            withAnimation {
                                    self.showContent.toggle()
                            }
                          }) {
                            Image(systemName: "xmark.circle.fill").font(.title)
                            Spacer()
                          }.padding(.leading, 20)
                    }
                    Spacer()
                }
                .padding(.top,15)
            }
            .background(darkMode ? Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)) : Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
            .animation(.default)
            .transition(.move(edge: .trailing))
            .zIndex(2) // <<------ Note this!
        }

推荐阅读