SwiftUI中点击按钮按_id索引加载下一组JSON数据的实现问题

你已经成功完成了JSON数据的加载工作，现在只需要补充追踪当前显示数据索引的逻辑，以及按钮触发索引更新的动作就能实现切换功能。下面是修改后的完整代码，帮你搞定点击按钮加载下一组数据的需求：

核心改动说明 #

• 用@State变量currentIndex记录当前显示的数据项索引
• 调整UI显示逻辑，基于当前索引获取对应的数据
• 给按钮添加更新索引的动作，同时处理数组边界（支持循环切换）
• 增加空数组安全判断，避免数组为空时崩溃

修改后的ContentView #

import SwiftUI
struct ContentView: View {
    // 添加@State变量追踪当前显示的索引
    @State private var currentIndex = 0
    
    var body: some View {
        ZStack {
            HStack {
                Button(action: {
                    // 更新索引，到达最后一项后自动回到第一项（循环切换）
                    currentIndex = (currentIndex + 1) % labels.count
                }) {
                    Text("R")
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.black)
                        .background(Color.red)
                        .clipShape(Circle())
                }
                // 数组为空时禁用按钮，避免无效操作
                .disabled(labels.isEmpty)
            }
            VStack{
                // 先判断数组是否有数据，再根据索引展示内容
                if !labels.isEmpty {
                    let currentLabel = labels[currentIndex]
                    VStack { Text(currentLabel._name) }
                    VStack { Text(currentLabel._type) }
                    VStack { Text(currentLabel._description) }
                } else {
                    Text("暂无数据")
                }
            }
            .offset(x: 0, y: -100)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

其他代码无需改动 #

你的LabelData结构体、DataLoader工具类和labeldata.json都可以保持原样，不需要额外修改。

额外优化建议 #

• 如果不想循环切换，而是到最后一项后禁用按钮，可以调整按钮逻辑：

  Button(action: {
      if currentIndex < labels.count - 1 {
          currentIndex += 1
      }
  }) {
      // ...按钮样式
  }
  .disabled(currentIndex >= labels.count - 1 || labels.isEmpty)
  

• 给切换动作添加动画效果，让UI过渡更流畅：

  Button(action: {
      withAnimation {
          currentIndex = (currentIndex + 1) % labels.count
      }
  }) {
      // ...按钮样式
  }
  

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