Reputation: 521
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:
Upvotes: 5
Views: 6954
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)
}
}
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 }
}
but I prefer to go with faded background
Upvotes: 2