Button(action:
CardView() //here it show an error how to add the CardView Swift ui file in this button //
) {
Image(systemName: "creditcard")
.resizable()
.foregroundColor(Color("Icon Color"))
.frame(width:24, height: 24)
}
.padding(.top, 825.0)
.padding(.trailing, 125.0)
Could you explain better what you want to do ?
On tap of button, what do you want to show ? Is it the content of CardView ?
It will show CardView, so it is up to you to design the CardView.
No, i have designed the CardView in another swift ui im unable to set it as a button in contentView it should work as when a click that button it should open that CardView Swift UI but i dont know how to call that in buttoN
Here is a very simple example on how to do it:
struct ContentView: View {
@State var showIt: Bool = false
var body: some View {
Button(action: { showIt.toggle() }) { Text("Show/hide") }
Spacer()
if showIt { CardView() }
}
}
struct CardView: View {
var body: some View {
Text("the Card View!")
}
}
Whoa thanks i will try it out and tell you Thanks❤️✌️
This code perfectly working but my CardView is so much smaller than the original here is the photo graph
import SwiftUI
struct CardView: View {
var body: some View {
ZStack {
Color.background
.ignoresSafeArea()
HStack{
Image(systemName: "chevron.backward")
.foregroundColor(Color.white)
Spacer()
Text("Wallet")
.foregroundColor(Color.white)
Spacer()
Image(systemName: "ellipsis")
.foregroundColor(Color.white)
}
.padding()
.padding(.top, -400.0)
HStack(alignment: .top){
Text("Cards Wallet")
.foregroundColor(Color.white)
}
.padding(.top, -325.0)
//MARK: View Bar is added
ZStack{CardViewBar()
.fill(Color.background_1)
.frame(width: 350, height: 3)
CardViewBar()
.fill(Color.CardViewBar)
.frame(width:175,height: 3)
.padding(.leading, -175.0)
}
.padding(.bottom, 575.0)
//MARK: Credit Card is Stacked
ZStack{
Image("Credit Card 3")
.padding(.bottom, 80.28)
Image("Credit Card 2")
.padding(.bottom, 40.14)
Image("Credit Card 1")
}
.padding(.bottom, 200.0)
ScrollCircle()
.fill(Color.background_1)
.frame(width: 10, height: 10, alignment: .center)
.padding(.top, 90.0)
ScrollCircle()
.fill(Color.background_1)
.frame(width: 10, height: 10, alignment: .center)
.padding([.top, .leading], 90.0)
ScrollCircle()
.fill(Color.CardViewBar)
.frame(width: 10, height: 10, alignment: .center)
.padding([.top, .trailing], 90.0)
Image("Icons Menu")
.padding(.top, 225.0)
ZStack {
DropDownBar()
.fill(Color.background_1)
.frame(width: 350, height: 250)
.padding(.top, 600.0)
VStack {
HStack {
Image(systemName: "plus")
.resizable()
.frame(width: 24, height: 24)
Text("Add Card")
.font(.title)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
}
.padding(.trailing, 150.0)
.padding(.top, 100.0)
Text("Add your debit/credit card")
.font(.body)
.fontWeight(.bold)
.foregroundColor(Color("Background"))
.padding(.top, -12.0)
.padding(.trailing, 60.0)
ZStack {
ListRectShape()
.fill(Color.background)
.frame(width: 310, height: 44)
.padding(.top, 15.0)
Text("Card Number")
.font(.body)
.padding(.trailing, 150.0)
.padding(.top)
}
ZStack {
ListRectShape()
.fill(Color.background)
.frame(width: 310, height: 44)
.padding(.top, 22.0)
Text("Card Holder Name")
.font(.body)
.padding(/*@START_MENU_TOKEN@*/.trailing, 110.0/*@END_MENU_TOKEN@*/)
.padding(.top, 25.0)
}
}
.padding(.top, 500.0)
.foregroundColor(Color.white)
}
}
}
}
struct CardView_Previews: PreviewProvider {
static var previews: some View {
CardView()
}
}
and here is the image
It doesn't seem to be smaller when comparing the 2 views…
It seems you define size of objects in CardView. Hence what you get.
So I do not really understand what you want.
Note: when you paste code, use Paste and Match Style, to avoid all the extra blank lines.
struct CardView: View {
var body: some View {
ZStack {
Color.background
.ignoresSafeArea()
HStack{
Image(systemName: "chevron.backward")
.foregroundColor(Color.white)
Spacer()
Text("Wallet")
.foregroundColor(Color.white)
Spacer()
Image(systemName: "ellipsis")
.foregroundColor(Color.white)
}
.padding()
.padding(.top, -400.0)
HStack(alignment: .top){
Text("Cards Wallet")
.foregroundColor(Color.white)
}
.padding(.top, -325.0)
//MARK: View Bar is added
ZStack{CardViewBar()
.fill(Color.background_1)
.frame(width: 350, height: 3)
CardViewBar()
.fill(Color.CardViewBar)
.frame(width:175,height: 3)
.padding(.leading, -175.0)
}
.padding(.bottom, 575.0)
//MARK: Credit Card is Stacked
ZStack{
Image("Credit Card 3")
.padding(.bottom, 80.28)
Image("Credit Card 2")
.padding(.bottom, 40.14)
Image("Credit Card 1")
}
.padding(.bottom, 200.0)
ScrollCircle()
.fill(Color.background_1)
.frame(width: 10, height: 10, alignment: .center)
.padding(.top, 90.0)
ScrollCircle()
.fill(Color.background_1)
.frame(width: 10, height: 10, alignment: .center)
.padding([.top, .leading], 90.0)
ScrollCircle()
.fill(Color.CardViewBar)
.frame(width: 10, height: 10, alignment: .center)
.padding([.top, .trailing], 90.0)
Image("Icons Menu")
.padding(.top, 225.0)
ZStack {
DropDownBar()
.fill(Color.background_1)
.frame(width: 350, height: 250)
.padding(.top, 600.0)
VStack {
HStack {
Image(systemName: "plus")
.resizable()
.frame(width: 24, height: 24)
Text("Add Card")
.font(.title)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
}
.padding(.trailing, 150.0)
.padding(.top, 100.0)
Text("Add your debit/credit card")
.font(.body)
.fontWeight(.bold)
.foregroundColor(Color("Background"))
.padding(.top, -12.0)
.padding(.trailing, 60.0)
ZStack {
ListRectShape()
.fill(Color.background)
.frame(width: 310, height: 44)
.padding(.top, 15.0)
Text("Card Number")
.font(.body)
.padding(.trailing, 150.0)
.padding(.top)
}
ZStack {
ListRectShape()
.fill(Color.background)
.frame(width: 310, height: 44)
.padding(.top, 22.0)
Text("Card Holder Name")
.font(.body)
.padding(/*@START_MENU_TOKEN@*/.trailing, 110.0/*@END_MENU_TOKEN@*/)
.padding(.top, 25.0)
}
}
.padding(.top, 500.0)
.foregroundColor(Color.white)
}
}
}
}
Ok i will try and update
the CardView is just toggle opening how to add CardView to open as full Screen when the button is pressed
Sorry, I still don't understand. CardView opens as you have defined it. If you want full screen, you need to design CardView as full screen.
If you want to hide what's behind, change the color
struct CardView: View {
var body: some View {
ZStack {
Color.red // Just to see, could select black
.ignoresSafeArea()