使用swiftui创建导航抽屉

Most iOS developers out there would absolutely dread it when the design demands of a Navigation Drawer in their iOS app. Simply put, there is no direct way to implement it from iOS. I am not a fan of this design, because it is so un-iOS like. Having said that, when the need arises, we must put aside our differences and get the job done.

当iOS应用程序中对导航抽屉的设计要求很高时，大多数iOS开发人员绝对会感到恐惧。 简而言之，没有直接的方法可以从iOS实施它。 我不喜欢这种设计，因为它非常不像iOS。 话虽如此，当需要出现时，我们必须抛开分歧，完成工作。

Until now, I have been dependent on libraries like SWRevealViewController for this. I tried subclassing Segues to make this work without being dependant on CocoaPods too much, but it was too hard. That changed recently, with me starting to learn SwiftUI.

到目前为止，我一直依赖于诸如SWRevealViewController库。 我尝试对Segues进行子类Segues以在不过多依赖CocoaPods情况下完成此工作，但这太难了。 随着我开始学习SwiftUI ，这种情况最近发生了变化。

So here is my code, implementing a Custom Navigation Drawer, using SwiftUI -

这是我的代码，使用SwiftUI实现自定义导航抽屉-

Let’s start with creating a Model for Menu Items

让我们从为菜单项创建模型开始

class MenuContent: Identifiable, ObservableObject {
           var id = UUID()    var name: String = ""
    var image: String = ""    init(name: String, image: String) {
               self.name = name
        self.image = image
    }}

This is a pretty straightforward definition of a Model. We give the menu a Title(name)and an Icon(image).

这是一个非常简单的模型定义。 我们给菜单一个标题( name )和一个图标( image )。

We conform our Class MenuContent to Identifiable and ObservableObject so that the list created from this class remains distinct(unique elements with Identifier represented by UUID) and we can observe changes made on the class object, respectively.

我们使Class MenuContent与Identifiable和ObservableObject以便从此类创建的列表保持不同(具有UUID表示的Identifier的唯一元素)，并且我们可以分别观察对类对象所做的更改。

Next we can create a list of menuContents as a testData.

接下来，我们可以创建一个menuContents列表作为testData。

let menuHome = MenuContent(name: "Home", image: "house.fill")let menuProfile = MenuContent(name: "Profile", image: "person.fill")let menuChat = MenuContent(name: "Chat", image: "message.fill")let menuLogout = MenuContent(name: "Logout", image: "power")let menuContents = [menuHome, menuProfile, menuChat, menuLogout]

In WWDC 2019, Apple introduced SF Symbols and it has been gorgeous. A library of Vector images that we can use in our apps. Since they are Vector images, they are scalable and easily customisable. The image variable is accepting String names that match the title of Images available in SF Symbols.

在WWDC 2019中，Apple推出了SF Symbols ，它非常漂亮。 我们可以在应用程序中使用的矢量图像库。 由于它们是矢量图像，因此它们是可伸缩的并且易于自定义。 image变量接受与SF Symbols中可用的Image标题匹配的字符串名称。

For more information on SF Symbols, check out the official documentation below-

有关SF符号的更多信息，请查看以下官方文档-

</