Importing the data typed by the user to a view?

user_14601162 0
Viewed 50

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

swiftui swift xcode ios
3 Answers

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.

user_119698170

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

user_411160

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.

user_134535210
Related