SwiftUI中多级依赖ListView的最优实现方案咨询

嘿，这个三级联动的需求其实挺常见的，你现在遇到的问题核心是分散的数组没法直接关联层级关系，咱们先把数据结构重构一下，之后联动逻辑就会变得非常清晰。我给你一套完整的实现方案，直接就能用：

原来三个独立的数组没办法直接体现从属关系，所以咱们先定义结构化的模型来组织大洲、国家、城市的层级：

// 城市模型，遵循Identifiable方便ListView使用
struct City: Identifiable {
    let id = UUID()
    let name: String
}

// 国家模型，包含所属城市列表
struct Country: Identifiable {
    let id = UUID()
    let name: String
    let cities: [City]
}

// 大洲模型，包含所属国家列表
struct Continent: Identifiable {
    let id = UUID()
    let name: String
    let countries: [Country]
}

然后用这个模型初始化你的数据，这样从属关系一目了然：

let continents: [Continent] = [
    Continent(
        name: "Europe",
        countries: [
            Country(
                name: "UK",
                cities: [City(name: "London"), City(name: "Birmingham")]
            ),
            Country(
                name: "France",
                cities: [City(name: "Paris")]
            )
        ]
    ),
    Continent(
        name: "Africa",
        countries: [
            Country(
                name: "Senegal",
                cities: [City(name: "Dakar")]
            )
        ]
    )
]

接下来创建三个对应层级的视图，通过NavigationLink传递选中的上级数据，自动筛选下一级内容：

1. 第一级：大洲列表视图 #

struct ContinentListView: View {
    let continents: [Continent]
    
    var body: some View {
        // iOS 16+用NavigationStack，iOS 15及以下换NavigationView
        NavigationStack {
            List(continents) { continent in
                NavigationLink(destination: CountryListView(selectedContinent: continent)) {
                    Text(continent.name)
                }
            }
            .navigationTitle("Continents")
        }
    }
}

2. 第二级：国家列表视图 #

这里直接接收选中的大洲，用它自带的countries属性展示，自动过滤掉其他大洲的国家：

struct CountryListView: View {
    let selectedContinent: Continent
    
    var body: some View {
        List(selectedContinent.countries) { country in
            NavigationLink(destination: CityListView(selectedCountry: country)) {
                Text(country.name)
            }
        }
        .navigationTitle(selectedContinent.name)
    }
}

3. 第三级：城市列表视图 #

同理，接收选中的国家，直接展示它的cities属性即可：

struct CityListView: View {
    let selectedCountry: Country
    
    var body: some View {
        List(selectedCountry.cities) { city in
            Text(city.name)
        }
        .navigationTitle(selectedCountry.name)
    }
}

最后在主视图里调用第一级列表即可：

struct ContentView: View {
    var body: some View {
        ContinentListView(continents: continents)
    }
}

如果因为特殊原因不能重构数据结构（比如数据来自外部接口），也可以通过数组筛选实现：给国家加一个continent属性，选中大洲后用myCountries.filter { $0.continent == selectedContinentName }来过滤，但这种方式需要额外维护从属关系，不如层级化模型优雅。

这样整个联动逻辑就完全通顺了：选Europe只会显示UK和France，选France只会显示Paris，完美匹配你的需求～

内容的提问来源于stack exchange，提问作者chuckbass