SwiftUI中如何实现点击按钮切换图片及遍历资产库图片

问题根因 #

• 视图渲染逻辑错位：你将图片渲染的ForEach代码放在了按钮的action闭包内，该闭包仅执行点击后的业务逻辑，不会生成页面视图，因此图片无法展示也无法切换。
• 图片加载API误用：Image(systemName:)用于加载系统内置SF Symbol图标，本地导入的项目资源图片需要用Image("图片文件名")加载。
• 切换逻辑缺失：仅累加了点击计数器，没有将计数器和当前展示的图片做关联，自然不会触发图片切换。
• 手动维护图片数组效率低：100+张图片手动写进数组容易出错且效率极低。

修复方案 #

第一步：统一图片命名规则 #

先将所有导入的图片按照序号_名称的格式统一命名，比如你现有示例中的1_ArRehmanu、2_xxx、3_AlMaliku……直到你实际的图片总数，后续可以直接通过规则生成文件名，不需要手动逐个写入数组。

第二步：修改代码逻辑 #

import SwiftUI

struct ContentView: View {
    // 存储当前展示的图片索引，从0开始
    @State var currentImageIndex = 0
    // 只存图片文件名，不要提前生成Image实例，性能更好
    @State var imageNames: [String] = [
        "1_ArRehmanu", "3_AlMaliku", "4_AlQudoos"
        // 其余文件名可以按规则批量生成，不需要手动逐个写
    ]
    
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                // 图片渲染放在视图树中，不要写在按钮action里
                Image(imageNames[currentImageIndex])
                    .resizable()
                    .foregroundColor(.black)
                    .frame(width: 330, height: 330)
                    .padding()
                
                Button(action: {
                    // 点击后切换索引，到最后一张自动回到第一张
                    currentImageIndex = (currentImageIndex + 1) % imageNames.count
                }, label: {
                    Text("Start")
                        .frame(width: 250, height: 60, alignment: .center)
                        .foregroundColor(.white)
                        .background(Color.black)
                        .cornerRadius(8.0)
                        .padding()
                })
                Text("\(currentImageIndex + 1) times")
                    .navigationTitle("Ninty Nine Names Of Allah")
                Spacer()
            }
            .padding()
            .onAppear {
                // 如果图片命名是统一的序号前缀，可以直接批量生成文件名，不需要手动写数组
                // 示例：总共有99张图，命名规则为【数字_名称】
                // let totalImageCount = 99
                // for i in 1...totalImageCount {
                //     按你的命名规则拼接文件名加入imageNames即可
                // }
                
                // 如果图片放在沙盒目录而非Assets中，也可以通过Bundle遍历所有图片文件自动获取文件名
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

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