在導航視圖中為可搜索串列創建視圖

因此，我為包含在導航視圖中的眼部狀況詞匯表創建了一個可搜索串列，它的外觀/功能完全符合我的要求。唯一的問題是，一旦您單擊鏈接，它會將我帶到新視圖（完美），但我無法弄清楚如何為每個專案撰寫新視圖。由于我使用了 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()
    }

uj5u.com熱心網友回復：

到“...如何為每個專案編碼新視圖..”和“...能夠在新視圖中定義眼睛狀況和一些附加資訊...”嘗試以下代碼示例，其中aDetailsView已創建，并用作 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

標籤：迅速 代码 列表 用户界面搜索栏

上一篇：使用get方法添加到ArrayList

下一篇：如何通過復選框編譯其他串列的串列？