UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Custom Views with TextFields

Forums > SwiftUI

Hi there,

to get down to the point... is it possible to create Custom Views containing TextFields? More precisely, I am trying to have a List of customs views containing TextFields. Visually it works, however I have found no way to keep track of the text on the textfields.

I have been searching for info, but within the topic of custom views, the TextField never shows up. I am getting to the point to think that I will have to build the list having to type every single TexfField in a sort of static way, which doesn't look like a good practice to me... (which is not saying much, actually)

As a reference you can think about the Contacts App, which is a list of custom views (formally known as UITableViewCells) each containing a textfield.

2      

You have to store the data you want to edit in some kind of store. This could be an array. Then bind the text to the TextField. Could this help you: https://www.swiftbysundell.com/articles/building-editable-swiftui-lists/ ?

2      

Thanks @Hatsushira, that helps quite a bit.

However, lets say that I have built SwiftUI file, which defines something like a "CellView" with a TextField inside such as this:

import SwiftUI

struct TextInputRow: View {

    var labelText: String
    var textFieldPlaceholder: String
    @State var textFieldContent: String = ""

    var body: some View {

        HStack {
            Text("\(labelText) : ").bold()
            Spacer()
            TextField(textFieldPlaceholder, text: $textFieldContent).keyboardType(.decimalPad)
        }
        .padding()

    }
}

Now let's say that in my ContentView, I want to build a List, something of the sort:

List {
        TextInputRow(...)
        TextInputRow(...)
}

I really do not understand how should I be designing the TextInputRow view so that I can pass the text: attribute on my ContentView in order to keep track of it. Sorry if I don't make myself clear...

2      

This works for me. data is my Array of Strings just for testing purpose.

var body: some View {
        List {
            ForEach(data, id: \.self) { item in
                TextInputRow(labelText: "Label", textFieldPlaceholder: "Placeholder", textFieldContent: item)
            }
        }
    }

2      

Instead of

@State var textFieldContent: String = ""

You would need to pass in a Binding to a String in order to be able to edit the field in a TextInputRow.

Here is a simple example:

import SwiftUI

struct TextInputRow: View {

    var labelText: String
    var textFieldPlaceholder: String
    @Binding var textFieldContent: String

    var body: some View {

        HStack {
            Text("\(labelText) : ").bold()
            Spacer()
            TextField(textFieldPlaceholder, text: $textFieldContent).keyboardType(.decimalPad)
        }
        .padding()

    }
}

class BoundTextViewModel: ObservableObject {
    @Published var names: [String] = [
        "Charlotte Grote",
        "Shauna Wickle",
        "Mildred Haversham",
        "Linton Baxter",
        "Jack Finch",
        "Sonny Craven"
    ]
}

struct BoundTextView: View {
    @StateObject var viewModel = BoundTextViewModel()

    var body: some View {
        List {
            ForEach(Array(viewModel.names.enumerated()), id: \.0.self) { idx, name in
                TextInputRow(labelText: "Person", textFieldPlaceholder: "Enter Person", textFieldContent: $viewModel.names[idx])
            }
        }
        .onChange(of: viewModel.names) { _ in
            //just to prove that the source array is being updated
            print(viewModel.names)
        }
    }
}

2      

Thanks a lot @roosterboy ! That was exactly it!

And thenk you @Hatsushira as well, because that article you linked was well worth the read!

2      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.