如何使用 SwiftUI 制作明暗模式之间的过渡动​​画？

Question

我不知道 SwiftUI 是否支持此功能，但我正在尝试在按钮为 a 时在应用程序范围内设置从浅色/深色模式的过渡动画。我的屏幕底部有一个导航栏，其中有一个按钮，点击时可以从太阳图标切换到月亮图标。

从浅色模式到深色模式的切换确实有效，反之亦然，但是是立即的，看起来就像有人刚刚关掉了灯。以下代码中使用的动画仅用动画更改我的按钮的图像。

这是我所拥有的：

导航栏视图.swift

struct NavigationBarView: View {

@AppStorage("isDarkMode") private var isDarkMode = false
...

var body: some View {
    ZStack {
        ...
            Button(action: {
                withAnimation(.easeInOut) {
                    isDarkMode.toggle()
                }
            }, label: {
                if isDarkMode {
                    Image.sunButton
                        .resizable()
                        .imageScale(.large)
                        .frame(width: 24, height: 24)
                        .foregroundColor(Color.darkGray)
                } else {
                    Image.moonButton
                        .resizable()
                        .imageScale(.large)
                        .frame(width: 24, height: 24)
                        .foregroundColor(Color.darkGray)
                }
                
            })
            
        ...
        
        }
    }
    ...
}

}

LucidityApp.swift

@main
struct LucidityApp: App {

@Environment(\.colorScheme) var colorScheme
@AppStorage("isDarkMode") private var isDarkMode = false

var body: some Scene {
    WindowGroup {
        Dashboard()
            .preferredColorScheme(isDarkMode ? .dark : .light)
            .background(colorScheme == .dark ? Color.darkGray : Color.white)
    }
}

}

提前感谢您的帮助，我是 SwiftUI 的新手，所以如果您有任何最佳实践提示，我很乐意倾听！

谢恩

编辑：我找到了解决方案，我将 WindowGroup 包装在 VStack 中的主应用程序 SwiftUI 文件中，并使用 .animation(.spring(), value: isDarkMode) 将 .animation 应用到 VStack，从而实现了从亮到暗的过渡按照我想要的方式进行模式。

Answer 1

你\xe2\x80\x99正在做正确的事情来在SwiftUI中为它设置动画，所以它一定不起作用。也许向 Apple 提交错误？

\n

幸运的是，如果您使用 UIKit，则可以为明暗模式切换设置动画。你\xe2\x80\x99ll必须以某种方式获取你的UIWindow，然后overrideUserInterfaceStyle根据这个答案对属性进行动画处理：

\n

if let window = UIApplication.shared.keyWindow {\n    UIView.transition (with: window, duration: 0.3, options: .transitionCrossDissolve, animations: {\n        window.overrideUserInterfaceStyle = .dark //.light or .unspecified\n    }, completion: nil)\n}\n

\n

只需将该代码放入您的 Button\xe2\x80\x99s 操作中，它就应该可以工作。

\n