SwiftUI 菜单下拉外观

Question

我目前正在学习 swift、swiftui 和其他组件，但我对菜单中按钮的外观感到困惑。 我在顶部栏有一个添加按钮，它显示为工作表。按下菜单按钮后，该菜单中的按钮将出现在顶部。我在下面留了空间，我的问题是，我可以更改从上到下按钮的外观吗？

这是应用程序的用户界面：

我的代码看起来像这样->

这是显示为工作表的视图：

struct EinkaufAddView: View {
    
    @State var artikelTextField: String = ""
    @State var anzahlTextField: String = ""
    @State var kategorieNamen: String = "Kategorie"
    
    var body: some View {
        NavigationStack {
            
            VStack {
                HStack {
                    VStack {
                        Section("Produkt") {
                            TextField("Hinzufügen...", text: $artikelTextField)
                                .frame(width: 200, height: 50)
                                .padding(.horizontal)
                                .background(Color.gray.opacity(0.3).cornerRadius(10))
                                .padding(.horizontal)
                        }
                    }
                    
                    VStack {
                        Section("Anzahl") {
                            TextField("0", text: $anzahlTextField)
                                .keyboardType(.numberPad)
                                .frame(height: 50)
                                .frame(maxWidth: .infinity)
                                .padding(.horizontal)
                                .background(Color.gray.opacity(0.3).cornerRadius(10))
                                .padding(.horizontal)
                        }
                    }
                }
                .padding(.bottom, 20)
                
                Section("Kategorie") {
                    Menu(kategorieNamen) {
                        Button("Obst") {
                            kategorieNamen = "Obst"
                        }
                        Button("Milchprodukte") {
                            kategorieNamen = "Obst"
                        }
                        Button("Fleisch") {
                            kategorieNamen = "Obst"
                        }
                        Button("Getränke") {
                            kategorieNamen = "Obst"
                        }
                    }
                    .frame(height: 50)
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal)
                    .background(Color.gray.opacity(0.3).cornerRadius(10))
                    .padding(.horizontal)
                }
            }
            .padding(.top, 30)
            
            Spacer()
            
            Button(action: {
                
            }, label: {
                Text("Produkt hinzufügen")
                    .foregroundStyle(.white)
                    .font(.title2)
                    .bold()
                    .frame(height: 50)
                    .frame(maxWidth: .infinity)
                    .background(Color.blue.cornerRadius(25))
            })
            .padding()
            
            .navigationTitle("Artikel hinzufügen")
        }
    }
}

#Preview {
    EinkaufAddView()
}

这是具有 .sheet 外观的视图：

struct Einkaufsliste: View {
    
    @State var showSheet: Bool = false
    @StateObject var vm = EinkaufViewModel()
    let kategorien: [Kategorie] = [
        Kategorie(title: "Obst", titleColor: Color.yellow, anzahl: 5),
        Kategorie(title: "Fleisch", titleColor: Color.purple, anzahl: 2),
        Kategorie(title: "Milchprodukte", titleColor: Color.blue, anzahl: 10),
        Kategorie(title: "Getränke", titleColor: Color.green, anzahl: 8)
    ]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                HStack {
                    VStack {
                        ForEach(kategorien) { item in
                            NavigationLink {
                                EinkaufslisteDetailView(vm: vm, kategorieName: item.title)
                            } label: {
                                EinkaufsListView(kategorieNamen: item.title, anzahlKategorien: item.anzahl)
                            }
                            .buttonStyle(.plain)
                            .foregroundStyle(item.titleColor)
                        }
                    }
                }
            }
            .navigationBarItems(
                trailing: Button(action: { showSheet.toggle() }, label: {
                    Image(systemName: "plus.circle")
                        .resizable()
                        .frame(width: 30, height: 30)
                })
                .sheet(isPresented: $showSheet) {
                    EinkaufAddView()
                        .presentationDetents([.fraction(0.8)])
                }
            )
            .navigationTitle("Einkaufsliste 🍎")
        }
    }
}

#Preview {
    Einkaufsliste()
}

struct EinkaufsListView: View {
    
    let kategorieNamen: String
    let anzahlKategorien: Int
    
    var body: some View {
        ZStack() {
            RoundedRectangle(cornerRadius: 15)
                .stroke()
            
            HStack {
                Image(systemName: "apple.logo")
                    .padding(.horizontal)
                
                Spacer()
                
                Text(kategorieNamen)
                
                Spacer()
                
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .stroke()
                        .frame(width: 40, height: 40)
                    Text("\(anzahlKategorien)")
                }
                
                Image(systemName: "arrow.right")
                    .padding()
            }
        }
        .font(.title2)
        .fontWeight(.bold)
        .frame(width: 350, height: 60)
        .background(Color.gray.opacity(0.5).cornerRadius(15))
        .padding(.top)
    }
}

请忽略其余的代码，它完全是一团糟😅。

我浏览了互联网，但找不到任何有用的东西。 我想我在某处听说过这是无法改变的，但我仍然在问也许我错了。

Answer 1

当我开始使用 Swift UI 时，我对每个想法也很满意，因此我的建议

我会从选项创建一个数组（使代码更简单并且非常易于维护）

let kategorien = ["Obst", "Milchprodukte", "Fleisch", "Getränke"]

并且您需要一个包含当前状态的状态变量：

@State private var ausgewaehlt = "Obst"

这里是选择器：

   Section("Kategorie") {
                    Picker("Kategorie", selection: $ausgewaehlt) {
                        ForEach(kategorien, id: \.self) {
                            Text($0)
                        }
                        
                    }
                    .pickerStyle(WheelPickerStyle())
                    .frame(height: 150)
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal)
                    .background(Color.gray.opacity(0.1).cornerRadius(10))
                    .padding(.horizontal)
                            
                }

选择器使用为当前所选选项选择的变量并列出所有类别。由于选择器使用绑定，每次更改后的更改都会保存到状态变量中。