struct BottomCard<Content:View>:View{
    @Binding var cardShown:Bool
    @Binding var cardDismissal:Bool
    let content:Content

    init(cardShown:Binding<Bool> , cardDismissal:Binding<Bool>, @ViewBuilder content: () -> Content){
        _cardShown = cardShown
        _cardDismissal = cardDismissal
        self.content = content()
    }

    var body: some View{
        ZStack{
            //Dimmed
            GeometryReader{ _ in
                EmptyView()
            }
            .background(Color.red.opacity(0.2))
            .animation(.easeIn)
            .onTapGesture {
                cardShown.toggle()
            }

            // Card
            VStack{
                Spacer()

                VStack{
                    content
                }
                Spacer()
            }
        }.edgesIgnoringSafeArea(.all)
        .opacity(cardShown ? 1 : 0)
    }
}

So you just need to set the height!

CodePudding user response：

what you want to do is to have a card that only exists when there is a certain standard met. If you want to push up a card from the bottom then you can make a view of a card and put it at the bottom of a Zstack view using a geometry reader and then make a button that only allows for that card to exist when the button is pressed INSTEAD of trying to hire it by changing its opacity. Also, make sure you move the dismissal button to the inside of the cad you have.

Heres an example you can try :

struct SecondView: View {
    @State var cardShown = false

     var body: some View {
      GeometryReader{
              ZStack {
                ZStack{
       // I would also suggest getting used to physically making your 
       //button and then giving them functionality using a "Gesture"
                 Text("Show Button")
                  .background(Rectangle())
                  .onTapGesture{
                 let animation = Animation.spring()
                   withAnimation(animation){
                     self.cardShown.toggle
                   }
                 }
               }
                ZStack {
                 if cardShown == true{
                   BottomCard(cardShown: $cardShown) {
                      CardContent()
                  }
               }
              // here you can change how far up the card comes after the button 
               //is pushed by changing the "0"
                .offset(cardShown == false ? geometry.size.height : 0)
               }
             }
           }
         }
       }

Also, you don't need to have a variable for the card being shown and a variable for the card being dismissed. Just have one "cardShown" variable and make it so that when it is TRUE the card is shown and when it is FALSE (after hitting the button on the card or hitting the initial button again.) the card goes away.