在导航视图中为可搜索列表创建视图

Question

所以我创建了一个可搜索的眼部疾病术语表列表，它被包装在导航视图中，它的外观/功能完全符合我的要求。唯一的问题是，一旦你点击一个链接，它给我带来了新的视图(完美)，但我不知道如何编码每个项目的新视图。由于我使用了ForEach，因此每当我尝试创建视图时，它都会复制到所有链接。我希望一旦你点击一个链接，我就能在新视图中看到眼睛状况的定义和一些额外的信息。如果你现在还看不出来，我是新手。任何建议都将非常感激。下面是我当前的代码:

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()
}

Answer 1

to "…如何为每个项目编写新视图…"还有"……"能够在新视图中拥有眼睛状况定义和一些附加信息…"尝试下面的代码示例，其中创建了一个DetailsView，并将其用作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")
}
}
}

注意，您也可以使用@StateObject/@EnvironmentObject代替@State向DetailsView传递信息。有很多关于如何使用它们的信息和教程。另请查阅ObservableObject