fakiho
fakiho

Reputation: 521

Presenting - Show a view on top in SwiftUI (I don't want to navigate)

Hey There I want to show a custom View in the middle of View I've tried to add ZStack and centered but doesn't work.. here's my code

 var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            headerView.padding().background(Color.white)
            ZStack(alignment: .center) {
                if(incomeFill_show) {
                    BudgetAlert(amount: .constant("400"))
                }

                List() {
                    VStack {
                        Section(header: self.getHeaderView()) {
                            ForEach(categoriesData) { category in
                                HStack(alignment: .bottom) {
                                    CategoryProgressView(category: category, value: .constant(.random(in: 0.1 ... 1)))
                                    self.valuesText(category: category)
                                }

                            }
                            .colorMultiply(Colors.SharedColors.backgroundColor)
                        }
                    }
                }
                .colorMultiply(Colors.SharedColors.backgroundColor)
                .onAppear {UITableView.appearance().separatorStyle = .none}
                .onDisappear { UITableView.appearance().separatorStyle = .singleLine }
            }


        }.background(Colors.SharedColors.backgroundColor)
    }

all I want is to show BudgetAlert() with blurred background like this:

enter image description here

Upvotes: 5

Views: 6954

Answers (1)

fakiho
fakiho

Reputation: 521

I solved it by placing

if(incomeFill_show) {
                    BudgetAlert(amount: .constant("400"))
                }

at the bottom of the List: like this

var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            headerView.padding().background(Color.white)
            ZStack(alignment: .center) {

                List() {
                    VStack {
                        Section(header: self.getHeaderView()) {
                            ForEach(categoriesData) { category in
                                HStack(alignment: .bottom) {
                                    CategoryProgressView(category: category, value: .constant(.random(in: 0.1 ... 1)))
                                    self.valuesText(category: category)
                                }

                            }
                            .colorMultiply(Colors.SharedColors.backgroundColor)
                        }
                    }
                }
                .colorMultiply(Colors.SharedColors.backgroundColor)
                .onAppear {UITableView.appearance().separatorStyle = .none}
                .onDisappear { UITableView.appearance().separatorStyle = .singleLine }

                if(incomeFill_show) {
                    BudgetAlert(amount: .constant("400"))
                }
            }


        }.background(Colors.SharedColors.backgroundColor)
    }
}

enter image description here

for blurred background you can see this code here:

var body: some View {
        VStack {
            Spacer()
            ZStack(alignment: .center) {
                RoundedRectangle(cornerRadius: 10).foregroundColor(Color.white)
                VStack {
                    Text("Add your Income").font(Fonts.mediumFont)
                    HStack(alignment: .center, spacing: 0) {

                        CustomTextField(placeHolderLabel: "Amount", val: $amount, keyboardType: UIKeyboardType.decimalPad).padding()

                         HStack {
                             Button("\(currency.rawValue)"){
                                 self.show_currencyActionsheet = true
                             }
                                 .font(Fonts.callout)
                                 .foregroundColor(Colors.textFieldFloatingLabel)
                             .actionSheet(isPresented: self.$show_currencyActionsheet) {self.actionSheetCurrency}
                             Image(systemName: "chevron.down")
                              .imageScale(.small)
                        }.padding()
                    }.padding([.leading,.trailing])

                    Button(action: {
                        self.callBack()
                    }) {

                        Text("                Add Income                ").font(Fonts.callout).foregroundColor(Color.white)
                    }
                    .padding()
                    .background(Colors.darkGreen)
                    .clipShape(Capsule())
                }
            }.frame(minHeight: 150, idealHeight: 182, maxHeight: 200)
            .padding()
            Spacer()

        }.background(VisualEffectView(effect: UIBlurEffect(style: .dark))
        .edgesIgnoringSafeArea(.all))
    }

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

enter image description here

but I prefer to go with faded background

Upvotes: 2

Related Questions