如何使用绑定解除此自定义模式？

Posted 2023-02-24

【中文标题】如何使用绑定解除此自定义模式？

【英文标题】：How do I dismiss this custom modal using bindings?

【发布时间】：2020-03-24 14:56:25

【问题描述】：

我无法弄清楚如何通过@State var showingCardModal = false 关闭在其父级内部显示的视图。这是我的 ContentView 的代码：

import SwiftUI

struct ContentView: View 

    @State var showingCardModal = false

    var body: some View 

        ZStack 
            Button(action: 
                withAnimation 
                self.showingCardModal.toggle()
                
            ) 
                Text("Show").font(.headline)
            
            .frame(width: 270, height: 64)
            .background(Color.secondary).foregroundColor(.white)
            .cornerRadius(12)
            if showingCardModal 
                CardModal()
                    .transition(AnyTransition.scale.combined(with: .opacity).animation(.easeIn(duration: 0.75)))
            
        
    

对于其中的 CardModal：

import SwiftUI

struct CardModal: View 

    //@Binding var isPresented: Bool

    var body: some View 

        ZStack
            Color(.secondarySystemBackground).edgesIgnoringSafeArea(.all)
            VStack
                Spacer().frame(height:30)
                Text("Today, 20 March").font(.title)
                Spacer()
                
            CarouselView(itemHeight: 420, views: [
                SingleCard(name: "Card 1", contentOpacity: 1.0),
                SingleCard(name: "Card 2", contentOpacity: 1.0),
                SingleCard(name: "Card 3", contentOpacity: 1.0),
                SingleCard(name: "Card 4", contentOpacity: 1.0),
                SingleCard(name: "Card 5", contentOpacity: 1.0),
                SingleCard(name: "Card 6", contentOpacity: 1.0),
                SingleCard(name: "Card 7", contentOpacity: 1.0),
                ])
            VStack 
                Spacer()
                Button(action:) 
                    Text("Done").font(.headline).foregroundColor(.purple)
                    
                    .frame(width: 300, height: 48)
                    .background(Color.gray.opacity(0.25))
                    .cornerRadius(12)
                Spacer().frame(height: 20)
            
        
    

我正在尝试在 Health App 中复制一些东西，比如当一个模式从底部滑入以显示月经周期的症状时。模态是全屏的，并通过按钮关闭。

【问题讨论】：

@Binding var isPresented: Bool 是正确的方式...继续。

是的，但是我应该在按钮的操作中添加什么？而在父视图的PreviewProvider 或CardModal() 参数中？

好的，我越来越近了：在 CardModalView 按钮操作中，我必须使用self.isPresented.toggle() - 预览代码呢？ CardModal(isPresented: ???Binding???))

【参考方案1】：

可以是这样的……

struct CardModal: View 
    @Binding var isPresented: Bool
...

    Button(action: self.isPresented = false ) 

在ContentView

if showingCardModal 
    CardModal(isPresented: self.$showingCardModal)

在 PreviewProvider 中

CardModal(isPresented: .constant(true))

【讨论】：

完美！非常感谢你。但是在我的代码中，我没有 .self 在像这样的 CardModal(isPresented: $showingCardModal) 的 ifshowingCardModal 中，它无论如何都可以工作。我应该在那里有.self 吗？

它不会做任何坏事，如果它工作正常 - 很好，但有时需要关闭它，所以无法测试你的代码快照我把它放在更好的可靠性。