How to select an array item which is presented in a SwiftUI List view?

0
votes

I have an array of Bike Types. In order to make a view of Bike Type Picker I have iterated the array in a SwiftUI List view. However, I could not find any solution how to select/store the tapped list item into a State variable. Could anyone suggest me a solution please?

My code is here below:

import SwiftUI

struct BikeTypePickerView: View {
    @State var selectedBikeType: String = ""

    var bikeTypes: [String] = ["BIKE TYPE", "Benelli 125 2 C", "Benelli 125 SE", "Benelli 125 Sport", "Benelli 125 T", "Benelli 250 C", "Benelli 250 Quattro", "Benelli 250 Sport", "Benelli 254 Quattro", "Benelli 304", "Benelli 350 RS", "Benelli 354"]

    init() {
        UITableView.appearance().separatorColor = .clear
    }
    var body: some View {
        VStack {
            List(bikeTypes, id: \.self, selection: $selectedBikeType) { type in
                Text(type)
            }
        }
        .frame(width: 150, height: 400)
        .font(.system(size: 13))
        .shadow(radius: 5)
    }
}

struct BikeTypePickerView_Previews: PreviewProvider {
    static var previews: some View {
        BikeTypePickerView()
    }
}
2
arrayslistswiftui

2 Answers

1
votes

Try below code. Using below code you can save selected item in selectedBikeType and also remove when you tap second time on that item.

struct ContentView: View {

    @State var selectedBikeType = Set<String>()

    var bikeTypes: [String] = ["BIKE TYPE", "Benelli 125 2 C", "Benelli 125 SE", "Benelli 125 Sport", "Benelli 125 T", "Benelli 250 C", "Benelli 250 Quattro", "Benelli 250 Sport", "Benelli 254 Quattro", "Benelli 304", "Benelli 350 RS", "Benelli 354"]

    init() {
        UITableView.appearance().separatorColor = .clear
    }

    var body: some View {
        VStack {
            List(self.bikeTypes, id: \.self, selection: $selectedBikeType) { type in
                Text(type)
                    .onTapGesture {
                    if self.selectedBikeType.contains(type) {
                        self.selectedBikeType.remove(type)
                    }
                    else{
                        self.selectedBikeType.insert(type)
                    }
                    print(self.selectedBikeType)
                }
            }
        }
        .frame(width: 150, height: 400)
        .font(.system(size: 13))
        .shadow(radius: 5)
    }
}
0
votes

try this

import SwiftUI

struct BikeTypePickerView: View {
    @Binding var selectedBikeType: String

    var bikeTypes: [String] = ["BIKE TYPE", "Benelli 125 2 C", "Benelli 125 SE", "Benelli 125 Sport", "Benelli 125 T", "Benelli 250 C", "Benelli 250 Quattro", "Benelli 250 Sport", "Benelli 254 Quattro", "Benelli 304", "Benelli 350 RS", "Benelli 354"]

    init() {
        UITableView.appearance().separatorColor = .clear
    }
    var body: some View {
        VStack {
            List(bikeTypes, id: \.self, selection: $selectedBikeType) { type in
                Text(type)
            }
        }
        .frame(width: 150, height: 400)
        .font(.system(size: 13))
        .shadow(radius: 5)
    }
}