时间戳

首页 > 解决方案 > 如何使用绑定解除此自定义模式？

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

问题描述

我无法弄清楚如何通过@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)
            }
        }
    }
}

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

标签： bindingmodal-dialogswiftui

解决方案

可以是这样的...

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

    Button(action:{ self.isPresented = false }) {

并且在ContentView

if showingCardModal {
    CardModal(isPresented: self.$showingCardModal)

并在 PreviewProvider

CardModal(isPresented: .constant(true))

推荐阅读