如何在 SwiftUI 中為條件渲染視圖添加過渡？

Question

如何為GroupedListStyle列表中的條件渲染視圖添加過渡？ 從“設置”中的“請勿打擾”部分實現類似條件DatePicker的功能（請參閱下面的 GIF）。

為條件渲染視圖添加transition和animation似乎不起作用。

if condition {
    Toggle(isOn: $foo) {
        HStack {
            Text("Foo")
        }
    }
    .transition(.opacity)
    .animation(.easeInOut)
    .toggleStyle(SwitchToggleStyle(tint: Color.red)
}

基於pawello2222的實現

動畫非常流暢，尤其是當視圖即將消失時。 過渡位置從第 1 幀到第 11 幀動畫，但從第 12 幀開始突然消失。

Answer 1

這是一個可能的解決方案，在withAnimation的幫助下更改 Published 值

class ContentViewModel : ObservableObject {
    @Published var isOn : Bool = false {
        didSet {
            withAnimation {
                if isOn {
                    showRow = true
                }
                else {
                    showRow = false
                }
            }
        }
    }
    
    @Published var showRow = false
}

struct ContentView: View {
    
    @ObservedObject var viewModel = ContentViewModel()
            
    var body: some View {
        
        List() {
            
            Text("Hello World")

            HStack() {
                Toggle("Test", isOn: $viewModel.isOn)
                    .toggleStyle(SwitchToggleStyle(tint: Color.red))
            }
            
            if (viewModel.showRow) {
                Text("Hello Second World")
            }
       }.listStyle(GroupedListStyle())
    }
}

Answer 2

它可能會更好，以保持與動畫相關的邏輯（如withAnimation ）的視圖中。

一種可能的解決方案是創建自定義Binding ：

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var binding: Binding<Bool> {
        .init(get: {
            viewModel.showRow
        }, set: { newValue in
            withAnimation {
                viewModel.showRow = newValue
            }
        })
    }

    var body: some View {
        List {
            Text("Text")
            Toggle("Toggle", isOn: binding)
                .toggleStyle(SwitchToggleStyle(tint: Color.red))
            if viewModel.showRow {
                Text("Hidden Text")
            }
        }
        .listStyle(GroupedListStyle())
    }
}