SwiftUI：基于@Published变量更新按钮样式及函数报错解决问询

错误原因 #

你遇到的type '()' cannot conform to 'View'错误主要由以下几点导致：

• 无明确View返回：setButtons函数的if/else块内仅编写了ForEach逻辑，但未将所有生成的视图包裹在容器（如VStack）中并返回，SwiftUI默认推断返回类型为()，不符合some View要求。
• 错误使用可变变量：用increment这种可变变量手动跟踪索引的方式，违背了SwiftUI声明式视图构建的原则，会破坏视图状态一致性，且这种写法在View构建函数中不被允许。
• 错误的视图刷新逻辑：试图在按钮点击时手动调用setButtons重新生成视图，而SwiftUI是状态驱动的，只需更新@Published变量即可自动刷新视图。

修正方案：让函数符合View协议 #

要让函数返回合法的View，需做以下调整：

1. 用容器视图（如VStack）包裹所有行的HStack，作为函数的返回值。
2. 抛弃手动维护increment的方式，改用分组的方式处理按钮行（将选项数组按每2个元素一组拆分）。
3. 直接访问game的@Published状态，无需传递大量参数，利用状态驱动视图样式变化。

更简洁的实现方式 #

以下是重构后的完整代码，基于状态驱动的思想简化逻辑：

1. 游戏ViewModel（ObservableObject） #

import SwiftUI

struct Answer {
    let answer: String
    // 可添加题目提示等其他属性
}

class GameViewModel: ObservableObject {
    @Published var score = 0
    @Published var answerChoices: [String] = []
    @Published var currentAnswer: Answer
    @Published var reviewState = false
    @Published var selectedButtonIndex: Int? // 记录用户点击的按钮索引
    
    // 初始化示例，实际根据游戏逻辑调整
    init() {
        currentAnswer = Answer(answer: "正确答案")
        answerChoices = ["选项1", "选项2", "正确答案", "选项4", "选项5"]
    }
    
    // 下一题逻辑
    func nextQuestion() {
        reviewState = false
        selectedButtonIndex = nil
        // 这里添加生成新题目和选项的逻辑
    }
}

2. 按钮样式定义 #

struct DefaultButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.gray)
            .foregroundColor(.white)
            .cornerRadius(8)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
    }
}

struct CorrectButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

struct IncorrectButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.red)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

3. 主视图与按钮生成逻辑 #

struct GameView: View {
    @StateObject private var game = GameViewModel()
    
    var body: some View {
        VStack(spacing: 20) {
            // 题目展示区域
            Text("当前题目")
                .font(.title)
            
            // 生成选项按钮
            answerButtons()
            
            // 控制按钮（开始/下一题）
            Button(game.reviewState ? "下一题" : "开始游戏") {
                if game.reviewState {
                    game.nextQuestion()
                } else {
                    // 初始化游戏逻辑，比如生成第一题
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
    
    // 生成选项按钮的函数
    private func answerButtons() -> some View {
        // 将选项分组，每行最多2个
        let groupedChoices = stride(from: 0, to: game.answerChoices.count, by: 2).map {
            Array(game.answerChoices[$0..<min($0+2, game.answerChoices.count)])
        }
        
        return VStack(spacing: 16) {
            ForEach(groupedChoices, id: \.self) { row in
                HStack(spacing: 16) {
                    ForEach(row.indices, id: \.self) { rowIndex in
                        let globalIndex = (groupedChoices.firstIndex(of: row)! * 2) + rowIndex
                        let choice = row[rowIndex]
                        
                        Button(choice) {
                            game.reviewState = true
                            game.selectedButtonIndex = globalIndex
                            // 处理分数计算
                            if choice == game.currentAnswer.answer {
                                game.score += 1
                            }
                        }
                        .buttonStyle(getButtonStyle(for: globalIndex))
                        .disabled(game.reviewState) // 查看答案时禁用按钮
                    }
                }
            }
        }
    }
    
    // 根据状态返回对应按钮样式
    private func getButtonStyle(for index: Int) -> ButtonStyle {
        guard game.reviewState else {
            return DefaultButtonStyle()
        }
        
        let isCorrect = game.answerChoices[index] == game.currentAnswer.answer
        let isSelected = index == game.selectedButtonIndex
        
        switch (isCorrect, isSelected) {
        case (true, _):
            return CorrectButtonStyle()
        case (false, true):
            return IncorrectButtonStyle()
        default:
            return DefaultButtonStyle()
        }
    }
}

核心优化点 #

• 状态驱动视图：所有按钮样式、状态都由game的@Published变量控制，无需手动刷新视图。
• 分组处理行逻辑：用stride函数将选项数组按2个一组拆分，避免手动维护索引，代码更简洁。
• 禁用交互优化：在reviewState为true时禁用按钮，防止重复点击。

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