CODEWITHSUNDEEP
iosswiftswiftui
user3069232
user3069232

Reputation: 8995

Creating a custom alertSheet in SwiftUI

Swift 5.x iOS 13/14

Trying to build a custom action sheet and mystified as to why this slides from the left and then up when I am telling it to simply slide from the bottom or at least I thought that was what I was asking.

import SwiftUI

struct ContentView: View {
@State private var showingCustomSheet = false
var body: some View {
    ZStack {
        Button(action: {
            self.showingCustomSheet.toggle()
        }) {
            Text("Fire")
              .font(.largeTitle)
              .foregroundColor(Color.red)
        }
        if showingCustomSheet {
          CustomAlertSheet(showingCustomSheet: $showingCustomSheet)
        }
    }
}
}

struct CustomAlertSheet: View {
@Binding var showingCustomSheet: Bool
@State var showEscape = false
var body: some View {
VStack {
  Spacer().onAppear {
    withAnimation(.linear(duration: 2)) {
        showEscape.toggle()
    }
  }
  if showEscape {
      Rectangle()
        .fill(Color.red)
        .frame(width: 256, height: 128)
        .transition(.move(edge: .bottom))
        .animation(.default)
  }
}
}
}

Upvotes: 1

Views: 1045

Answers (1)

Asperi
Asperi

Reputation: 257493

Here is a solution - removed redundant things and some small fixes... Tested with Xcode 12 / iOS 14.

demo

struct ContentView: View {
    @State private var showingCustomSheet = false

    var body: some View {
        ZStack {
            Button(action: {
                self.showingCustomSheet.toggle()
            }) {
                Text("Fire")
                    .font(.largeTitle)
                    .foregroundColor(Color.red)
            }
            CustomAlertSheet(showingCustomSheet: $showingCustomSheet)
        }
    }
}

struct CustomAlertSheet: View {
    @Binding var showingCustomSheet: Bool

    var body: some View {
        VStack {
            Spacer()
            if showingCustomSheet {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 256, height: 128)
                    .transition(.move(edge: .bottom))
            }
        }
        .animation(.default, value: showingCustomSheet)
    }
}

Upvotes: 1

Related Questions