如何在SwiftUI中修改数组索引实现点击按钮更新页面内容

问题原因 #

你当前代码的核心问题是：视图展示用的programming是外部传入的固定值，和内部声明的@State index没有关联，所以你修改index之后并不会触发展示内容的更新。

解决方法 #

直接在视图内部用index读取数组对应位置的元素即可，不需要从外部传入programming参数，修改后的完整代码如下：

import SwiftUI

struct LanguageStruct: Identifiable {
    var id = UUID()
    var groupTitle: String
    var title: String
    var subTitle: String
    var image: String
}

var progLanguages = [
    LanguageStruct(groupTitle: "Java", title: "Lame Langauge", subTitle: "Bad GUI", image: "Push-ups Wide"),
    LanguageStruct(groupTitle: "SwiftUI", title: "Nice and New", subTitle: "Better than Swift but incomplete", image: "Sit-ups")
]

struct Playground_arrays: View {
    
    @State private var index = 0
    
    var body: some View {
        VStack {
            // 直接通过index读取数组对应元素
            Text(progLanguages[index].groupTitle)
            Text(progLanguages[index].subTitle)
            Image(progLanguages[index].image)
            
            Button(action:{
                // 用数组长度做边界判断，适配后续数组扩容的场景
                if index < progLanguages.count - 1 {
                    index += 1
                } else {
                    index = 0
                }
            }, label:{
                Text("Change Index")
                    .fontWeight(.semibold)
            })
            // 如果你没有自定义PrimaryButtonStyle可以把下面这行注释掉测试
            .buttonStyle(PrimaryButtonStyle(buttonColor: "PositiveGreen"))
        }
    }
}

struct Playground_arrays_Previews: PreviewProvider {
    static var previews: some View {
        // 不需要再传入programming参数
        Playground_arrays()
            .previewDevice("iPhone 12 mini")
    }
}

改动说明 #

• 移除了视图的programming入参，所有展示内容直接通过progLanguages[index]获取，@State修饰的index修改时会自动触发视图刷新，渲染对应索引的内容
• 索引边界判断改用数组长度计算，不需要硬编码数值，后续你增加数组元素也不用改判断逻辑
• 预览代码同步移除了入参，直接初始化视图即可

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