Swift中如何用ForEach遍历数组奇偶索引实现两列按钮布局

你的问题出在两个VStack都完整遍历了game.ButtonAnswers数组，导致每个按钮重复显示。要实现左列放第1、3、5…个元素（对应偶数索引0、2、4…），右列放第2、4、6…个元素（对应奇数索引1、3、5…），可以用以下两种方法修复：

方法一：在ForEach中过滤索引 #

直接在遍历的时候结合索引判断，只渲染对应列的元素：

HStack {
    VStack {
        // 左列：偶数索引元素（第1、3、5…个）
        ForEach(Array(game.ButtonAnswers.enumerated()), id: \.element.id) { index, answer in
            if index % 2 == 0 {
                ButtonRows(answer: answer)
                    .environmentObject(game)
            }
        }
    }
    VStack {
        // 右列：奇数索引元素（第2、4、6…个）
        ForEach(Array(game.ButtonAnswers.enumerated()), id: \.element.id) { index, answer in
            if index % 2 == 1 {
                ButtonRows(answer: answer)
                    .environmentObject(game)
            }
        }
    }
}

通过enumerated()同时获取元素的索引和值，用index % 2判断奇偶性，只保留对应列的元素。

方法二：提前拆分数组（更高效） #

先把原数组拆成左右两个子数组，再分别遍历，避免重复遍历原数组：

// 先在视图里定义计算属性，拆分数组
private var leftColumnAnswers: [YourAnswerType] {
    game.ButtonAnswers.enumerated()
        .filter { $0.offset % 2 == 0 }
        .map { $0.element }
}

private var rightColumnAnswers: [YourAnswerType] {
    game.ButtonAnswers.enumerated()
        .filter { $0.offset % 2 == 1 }
        .map { $0.element }
}

// 然后在布局中使用
HStack {
    VStack {
        ForEach(leftColumnAnswers, id: \.id) { answer in
            ButtonRows(answer: answer)
                .environmentObject(game)
        }
    }
    VStack {
        ForEach(rightColumnAnswers, id: \.id) { answer in
            ButtonRows(answer: answer)
                .environmentObject(game)
        }
    }
}

注意把YourAnswerType替换成你实际的数组元素类型，这种方式性能更优，代码结构也更清晰。

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