SwiftUI中如何实现多级按钮序列的显示与功能完善

修改思路 #

基于你的现有代码，我们通过添加新状态变量跟踪深层选择，实现点击子选项后展示下一级内容的功能。以下是针对「Evening → Savory 展示 Option1/Option2」的扩展实现，同时预留了Morning分支的扩展空间。

修改后的完整代码 #

import SwiftUI

struct IfElseQuiz: View {
    // 一级选择状态
    @State var isMorning = false
    @State var isEvening = false
    
    // 二级选择状态：控制是否展示对应三级选项
    @State var showMorningSnackOptions = false
    @State var showMorningMealOptions = false
    @State var showEveningSweetOptions = false
    @State var showEveningSavoryOptions = false
    
    var body: some View {
        VStack(spacing: 20) {
            // 一级选择：Morning/Evening
            if !isMorning && !isEvening {
                HStack(spacing: 20) {
                    Button {
                        isMorning.toggle()
                    } label: {
                        Text("Morning🌥")
                            .padding()
                            .background(.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                    
                    Button {
                        isEvening.toggle()
                    } label: {
                        Text("Evening☀️")
                            .padding()
                            .background(.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                }
            }
            // Morning分支的二级选择
            else if isMorning {
                if !showMorningSnackOptions && !showMorningMealOptions {
                    HStack(spacing: 20) {
                        Button {
                            showMorningSnackOptions.toggle()
                        } label: {
                            Text("Snack🥄")
                                .padding()
                                .background(.gray.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            showMorningMealOptions.toggle()
                        } label: {
                            Text("Meal🍽")
                                .padding()
                                .background(.gray.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
                // Snack的三级选项（可自行扩展功能）
                else if showMorningSnackOptions {
                    HStack(spacing: 20) {
                        Button {
                            print("Snack Option 1 clicked")
                        } label: {
                            Text("Option 1")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            print("Snack Option 2 clicked")
                        } label: {
                            Text("Option 2")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
                // Meal的三级选项（可自行扩展功能）
                else if showMorningMealOptions {
                    HStack(spacing: 20) {
                        Button {
                            print("Meal Option 1 clicked")
                        } label: {
                            Text("Option 1")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            print("Meal Option 2 clicked")
                        } label: {
                            Text("Option 2")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
            }
            // Evening分支的二级选择
            else if isEvening {
                if !showEveningSweetOptions && !showEveningSavoryOptions {
                    HStack(spacing: 20) {
                        Button {
                            showEveningSweetOptions.toggle()
                        } label: {
                            Text("Sweet🍦")
                                .padding()
                                .background(.gray.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            showEveningSavoryOptions.toggle()
                        } label: {
                            Text("Savory🧂")
                                .padding()
                                .background(.gray.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
                // Sweet的三级选项（可自行扩展功能）
                else if showEveningSweetOptions {
                    HStack(spacing: 20) {
                        Button {
                            print("Sweet Option 1 clicked")
                        } label: {
                            Text("Option 1")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            print("Sweet Option 2 clicked")
                        } label: {
                            Text("Option 2")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
                // Savory的三级选项（实现你需要的功能）
                else if showEveningSavoryOptions {
                    HStack(spacing: 20) {
                        Button {
                            print("Savory Option 1 clicked")
                        } label: {
                            Text("Option 1")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                        
                        Button {
                            print("Savory Option 2 clicked")
                        } label: {
                            Text("Option 2")
                                .padding()
                                .background(.blue.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
            }
        }
        .padding()
    }
}

// 预览视图
struct IfElseQuiz_Previews: PreviewProvider {
    static var previews: some View {
        IfElseQuiz()
    }
}

关键修改说明 #

• 状态重构：将原有的isSnack/isMeal等变量改为showXXXOptions，更清晰表达「是否展示对应层级选项」的语义
• 层级嵌套：在二级选择分支下添加三级选项的视图判断，实现点击子选项后展示下一级内容的逻辑
• 功能预留：每个三级按钮都添加了打印示例，你可以替换为导航到新页面、展示详情等自定义业务逻辑
• UI优化：给按钮添加内边距、背景色和圆角，提升交互视觉体验

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