SwiftUI中能否在循环内使用视图？多相似页面实现咨询

直接在for循环内嵌套NavigationView的做法是错误的——每个页面不需要独立的导航容器，整个应用只需要一个根导航组件（NavigationView或iOS16+的NavigationStack），再通过复用通用视图+循环生成导航链接的方式实现需求，这个方案完全可行。

核心思路 #

定义一个接受图片名称参数的通用详情页，然后在主视图的导航容器内，通过循环遍历图片名称数组，生成指向该通用视图的导航链接，以此实现23个布局一致、仅图片不同的页面。

示例代码 #

1. 兼容iOS13+的NavigationView实现

首先定义通用详情视图：

struct ImageDetailView: View {
    let imageName: String
    
    var body: some View {
        Image(imageName)
            .resizable()
            .scaledToFit()
            .padding()
            .navigationTitle(imageName)
    }
}

然后在主视图中循环生成导航入口：

struct MainView: View {
    // 存储23个图片名称的数组
    let imageNames = ["img_01", "img_02", "img_03", /* ... 剩余20个图片名 ... */ "img_23"]
    
    var body: some View {
        NavigationView {
            List(imageNames, id: \.self) { name in
                NavigationLink(destination: ImageDetailView(imageName: name)) {
                    Text("查看图片：\(name)")
                }
            }
            .navigationTitle("图片库")
        }
    }
}

2. iOS16+推荐的NavigationStack实现

使用更现代的导航栈API，通过navigationDestination统一处理跳转逻辑：

struct MainView: View {
    let imageNames = ["img_01", "img_02", /* ... */ "img_23"]
    @State private var navigationPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            List(imageNames, id: \.self) { name in
                NavigationLink(value: name) {
                    Text("查看图片：\(name)")
                }
            }
            .navigationTitle("图片库")
            .navigationDestination(for: String.self) { imageName in
                ImageDetailView(imageName: imageName)
            }
        }
    }
}

为什么你的原方案失败 #

循环内创建多个NavigationView会导致导航层级混乱——每个NavigationView都是独立的导航容器，而非页面内容。正确的逻辑是：一个根导航容器负责管理整个导航流程，所有页面内容通过复用通用视图来生成。

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