Creating Views for Searchable List In Navigation View-CodePudding

So I created a searchable list for an eye condition glossary that is wrapped in navigation view and it looks/functions exactly how I want it to. The only problem is, once you click on a link, it brings me to the new view (perfect) but I cannot figure out how to code the new view for each item. Since I used ForEach, anytime I try create a view, it replicates to all the links. I would like it to where once you click on a link, I will be able to have the eye conditions definition and some additional information in the new view. If you cannot tell by now, I'm new to this. Any advice would be greatly appreciated. Here is my current code:

struct EyeTerminology: View {

let names = ["Amblyopia","Anopthalmia","Aphakia","Astigmatism","Axenfeld-Rieger Syndrome","Batten Disease","Bietti’s Crystalline Dystrophy","Bulls Eye Maculopathy","Cataract","Charles Bonnet Syndrome","Choroideremia","Coloboma","Color Blindness","Convergence Insufficiency","Corneal Scarring","Cortical Vision Impairment (CVI)","Cystinosis","Devic Disease","Diabetic Retinopathy","Diplopia","Enucleation","Esotropia","Exotropia","Floaters/Flashes","Glaucoma","Graves Disease","Heterochromia","Histoplasmosis","Hyperopia","Idiopathic Intracranial Hypertension","Keratoconus","Lebers","Macular Degeneration","Macular Edema","Microphthalmia","Myopia","Nystagmus","Ocular Albinism","Optic Atrophy","Optic Nerve Hypoplasia","Optic Neuritis","Photophobia","Polycoria","Ptosis","Retinal Detachment","Retinitis Pigmentosa","Retinoblastoma","Retinopathy of Prematurity (Stage 1)","Retinopathy of Prematurity (Stage 2)","Retinopathy of Prematurity (Stage 3)","Retinopathy of Prematurity (Stage 4)","Retinoschisis","Shaken Baby Syndrome","Stargardts","Strabismus","Toxoplasmosis","Unknown Etiology","Ushers Syndrome","Uveitis"]

    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List {
                ForEach(searchResults, id: \.self) { name in
                    NavigationLink(destination: Text(name)) {
                        Text(name)
                    }
                }
            }
            .searchable(text: $searchText)
            .navigationTitle("Eye Dictionary")
        }
        .hiddenNavigationBarStyle()
    }

CodePudding user response：

to "...how to code the new view for each item.." and to "... be able to have the eye conditions definition and some additional information in the new view..." try the following code example, where a DetailsView is created, and is used as the destination of the NavigationLink.

struct ContentView: View {
    var body: some View {
        EyeTerminology()
    }
}

struct EyeTerminology: View {
    
    let names = ["Amblyopia","Anopthalmia","Aphakia","Astigmatism","Axenfeld-Rieger Syndrome","Batten Disease","Bietti’s Crystalline Dystrophy","Bulls Eye Maculopathy","Cataract","Charles Bonnet Syndrome","Choroideremia","Coloboma","Color Blindness","Convergence Insufficiency","Corneal Scarring","Cortical Vision Impairment (CVI)","Cystinosis","Devic Disease","Diabetic Retinopathy","Diplopia","Enucleation","Esotropia","Exotropia","Floaters/Flashes","Glaucoma","Graves Disease","Heterochromia","Histoplasmosis","Hyperopia","Idiopathic Intracranial Hypertension","Keratoconus","Lebers","Macular Degeneration","Macular Edema","Microphthalmia","Myopia","Nystagmus","Ocular Albinism","Optic Atrophy","Optic Nerve Hypoplasia","Optic Neuritis","Photophobia","Polycoria","Ptosis","Retinal Detachment","Retinitis Pigmentosa","Retinoblastoma","Retinopathy of Prematurity (Stage 1)","Retinopathy of Prematurity (Stage 2)","Retinopathy of Prematurity (Stage 3)","Retinopathy of Prematurity (Stage 4)","Retinoschisis","Shaken Baby Syndrome","Stargardts","Strabismus","Toxoplasmosis","Unknown Etiology","Ushers Syndrome","Uveitis"]
    
    @State private var searchText = ""
    
    var searchResults: [String] {
        return searchText.isEmpty ? names : names.filter { $0.contains(searchText) }
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(searchResults, id: \.self) { name in
                    NavigationLink(destination: DetailsView(name: name)) { // <-- here
                        Text(name)
                    }
                }
            }
            .searchable(text: $searchText)
            .navigationTitle("Eye Dictionary")
        }
    }
    
}

// -- here
struct DetailsView: View {
    @State var name: String  // <-- here, pass info into this view
    // @State var otherInfo: String  // <-- here etc...
    
    var body: some View {
        VStack (spacing: 33) {
            Text(name).foregroundColor(.blue)
            Text("some eye condition")
            Text("some more info on eye condition")
        }
    }
}

Note, you can also use @StateObject/@EnvironmentObject instead of @State to pass information to the DetailsView. There are plenty of info and tutorials on how to used those. Also look up ObservableObject