skip to Main Content

In the process of making my first Finance App, I want the user to type their Credit Card Name and las four numbers (probably more info since this is a draft) into this Modally presented view, to then be seen in a cards index, widget-look-like.

struct CardListView: View {

@State var isPresentingAddModal = false

@State var emisorTarjeta = ""
@State var numeroTarjeta = ""


var headerView: some View {

    HStack {

        Text("Tus tarjetas")

        Spacer()

        Button("Añadir nueva") {
            self.isPresentingAddModal.toggle()
       
    }
    .sheet(isPresented: $isPresentingAddModal, content: {
        
        HStack {
            Text("Emisor de tarjeta")
            TextField("Seleccionar emisor de tarjeta", text: $emisorTarjeta)
        }
        
        HStack {
            Text("Número de tarjeta")
            TextField("Escribí tu número de tarjeta", text: $numeroTarjeta)
        }
        
        Button(action: {
            self.isPresentingAddModal.toggle()
            print("(self.emisorTarjeta)")
            
        }, label: {
            Text("Añadir")
        })
        Spacer()
    })
}

The question now is how to pass the info typed from the two textFields, to the view where the cards will be created. The button "Añadir" currently works as a dismiss button instead of an add one, since I don’t know how to create that.

(Also, a lot of code like paddings and backgroundColors have been erased to make it clearer to see)

Enitre view of the homeView

Where the "añadir" button is

3

Answers


  1. there are several ways to do this. One simple way is to use "@State" and "@Binding" like this:

    In "CardListView" use this:

        @Binding var emisorTarjeta: String
        @Binding var numeroTarjeta: String
    

    and in the "CardViewCreator" use:

        @State var emisorTarjeta = ""
        @State var numeroTarjeta = ""
        
    

    Another way is to use "ObservableObject", create a class like this:

    class CardModel: ObservableObject {
        @Published var emisorTarjeta = ""
        @Published var numeroTarjeta = ""
    }
    

    In the your "CardViewCreator" or some parent view:

     @StateObject var cardModel = CardModel()
    

    and pass it to the "CardListView" like this:

     struct CardListView: View {
       @ObservedObject var cardModel: CardModel
         ...
     }
    

    You can also use "EnvironmentObject" in a similar way.
    It all depends on your case. I recommend reading up on "ObservedObject"
    and using that.

    Login or Signup to reply.
  2. A really simple way of doing this is to pass in a closure to run when the add button is tapped. Here’s an example, which also shows how to dismiss the presented sheet

    import SwiftUI
    
    struct Card: Identifiable {
        let id = UUID()
        let provider: String
        let number: String
    }
    
    struct ContentView: View {
        @State private var cards = [Card]()
        @State private var showingSheet = false
    
        var body: some View {
            VStack {
                List(cards, rowContent: CardView.init)
                .padding(.bottom, 10)
                Button("Add") {
                    showingSheet = true
                }
                .padding()
            }
            .sheet(isPresented: $showingSheet) {
                AddSheet(completion: addCard)
            }
        }
    
        func addCard(provider: String, number: String) {
            let newCard = Card(provider: provider, number: number)
            cards.append(newCard)
        }
    }
    
    struct CardView: View {
        let card: Card
    
        var body: some View {
            VStack(alignment: .leading) {
                Text(card.provider)
                Text(card.number)
            }
        }
    }
    
    struct AddSheet: View {
        @Environment(.presentationMode) var presentationMode
        @State private var provider = ""
        @State private var number = ""
        let completion: (String, String) -> Void
        var body: some View {
            VStack {
                TextField("Provider", text: $provider).padding()
                TextField("Number", text: $number).padding()
                Button("Add") {
                    completion(provider, number)
                    presentationMode.wrappedValue.dismiss()
                }
    
            }
        }
    }
    
    
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    enter image description here

    Login or Signup to reply.
  3. If you want to actually save the information passed in the textfield you would have to save it somewhere and later fetch it when required But this is only if you want to be able to access the information passed into the cards index after you have closed down the application and opened it up once again.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search