如何在 SwiftUI 中自定义菜单项的外观？

Question

我正在创建一个菜单，用户首先选择一个类别，然后选择一个子类别；我希望每个嵌套的菜单标签和菜单按钮标签都有自定义的外观。我尝试使用 .background(Color.blue) 修饰符，但正确渲染背景的唯一标签是最外面的菜单。

如何修改每个嵌套的菜单标签和菜单按钮标签以具有自定义背景？

import SwiftUI

struct ContentView: View {
    var body: some View {
        DropDownMenu()
    }
}

struct DropDownMenu: View {
  private let categories: [Category]
  @State private var selectedSubcategory = "Select a category"
  
  let letters = ["a", "b", "c"]
  
  init() {
    self.categories = [Category(name: "letters", subcategories: letters)]
  }
  
    var body: some View {
      /* Category */
      Menu {
        /* Subcategory */
        Menu {
          Button {
            self.selectedSubcategory = categories[0].subcategories[0]
          } label: {
            Text("\(categories[0].subcategories[0])")
          }
          Button {
            self.selectedSubcategory = categories[0].subcategories[1]
          } label: {
            Text("\(categories[0].subcategories[1])")
          }
          Button {
            self.selectedSubcategory = categories[0].subcategories[2]
          } label: {
            /* Blue background does not render */
            Text("\(categories[0].subcategories[2])")
              .background(Color.blue)
          }
        }
        label: {
          /* Blue background does not render */
          Text("\(categories[0].name)")
            .background(Color.blue)
        }
      } label: {
        /* Blue background does render */
        Text("\(selectedSubcategory)")
          .foregroundColor(.black)
          .background(Color.blue)
      }
    }
}

struct Category: Hashable {
  var id = UUID()
  var name: String
  var subcategories: [String]
}

Answer 1

您无法使用 SwiftUI 中的标准 foregroundColor 或 backgroundColor 修饰符真正更改菜单项的颜色。但如果您希望按钮为红色，则可以使用按钮角色参数并将其设置为 .delta。

您可以点击此链接：https://softwareanders.com/swiftui-menu-a-complete-guide/了解有关 SwiftUI 菜单的更多信息。

您可能会在 GitHub 中找到一些与 SwiftUI 自定义菜单相关的项目。