使用支持 SF 符号的 SwiftUI 轻松自定义的菜单

用法

1. 拖放菜单.swift到您的项目中

2. 在主视图中创建@State变量

   @State var isMenuShown: Bool = false

3. 在你的主ZStack中，添加以下代码

   if isMenuShown {
       Menu(isMenuShown: $isMenuShown, menuItems: self.getMenuItems())
   }

4. 将以下参数集添加到主视图中，该视图位于主 ZStack 中

   .cornerRadius(isMenuShown ? 20 : 0)
   .offset(x: isMenuShown ? 300 : 0, y: isMenuShown ? 50 : 0)
   .navigationTitle("Home")
   .navigationBarTitleDisplayMode(.inline)
   .ignoresSafeArea()
   .scaleEffect(isMenuShown ? 0.9 : 1)
   .navigationBarHidden(isMenuShown ? true : false)
   .shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.5), radius: 10, x: -10, y: 10)
   .toolbar{
       ToolbarItem(placement: .navigationBarLeading) {
           Button{
               toggleMenu()
           } label: {
           Image(systemName: "filemenu.and.selection")
               .foregroundColor(.black)
               .font(.system(size: 18))
                   }
               }
           }
           .onTapGesture {
               if isMenuShown {
                   toggleMenu()
               }
           }

5. 将属性添加到主 ZStack

   .onAppear {
       isMenuShown = false
   }

6. Add the below func in your SwiftUI file

   func toggleMenu() {
       withAnimation(.spring()) {
           self.isMenuShown.toggle()
       }
   }

7. Create an array of ‘MenuItem’ which we passed on to the Menu class in step 3

   func getMenuItems() -> [MenuItem] {
       
       let array = [
           MenuItem(text: "Home", textColor: .white, sfIconName: "house.circle", sfIconForgroundColor: .white, didTap: {
               self.toggleMenu()
           }),
           MenuItem(text: "Profile", textColor: .white, sfIconName: "person.crop.circle", sfIconForgroundColor: .white, destinationObject: AnyView(Profile())),
           MenuItem(text: "Logout", textColor: .white, sfIconName: "rectangle.portrait.and.arrow.right", sfIconForgroundColor: .white, didTap: {
               self.toggleMenu()
               self.logout()
           })
       ]
       
       return array
   }

With the above steps you will be able to add the SwiftyUI Menu to your application.

UI Customization options

• Text customization

  • By making use of , & property, you will be able to customize the menu item texttexttextColortextFont

• Icon customization

  • Menu item with icon image
    • With custom icon image
      • You can set your own custom image and manage its width and height and backgroundColor by using , , & propertiesiconImageNameiconImageWidthiconImageHeighticonImageBackgroundColor
    • With SF Symbols
      • You can make use of , , & properties to manage your iconssfIconNamesfIconForgroundColorsfIconBackgroundColorsfIconSize
  • Menu item without icon image
    • You can set to remove image from the menu itemnoIconRequired: true

Event control customization options

• Navigating to different view

  • You can pass on the view instance to . Make sure to cast your view to type before assigning the object.destinationObjectAnyView

• Get tap event

  • You can pass a closure to property to get the tap event on a menu item.didTap

Example

1. Example to shows the usage of closuredidTap:

   MenuItem(text: "Home", textColor: .white, sfIconName: "house.circle", sfIconForgroundColor: .white, didTap: {
   self.toggleMenu()
   })

2. Example to shows the usage of propertydestinationObject:

   MenuItem(text: "Profile", textColor: .white, sfIconName: "person.crop.circle", sfIconForgroundColor: .white, destinationObject: AnyView(Profile()))

3. Example to show the menu item with no events

   MenuItem(text: "No event menu item", textColor: .white, iconImageName: "apple", iconImageWidth: 40.0, iconImageHeight: 40.0)

4. Example to show menu item without an image

   MenuItem(text: "Menu item with no icon", textColor: .white, noIconRequired: true, destinationObject: AnyView(Settings()))

Installation – Manually

Drop Menu.swift into your project.