Implementierung von Seitenmenüs in der Swift-Benutzeroberfläche

Ich habe versucht, das Seitenmenü mit Swift UI zu reproduzieren. Sie können es durch Ziehen oder Tippen ein- oder ausblenden.

Umgebung

• xcode12.1
• Swift 5

Bild

Rosa Menü Blaues Zuhause Schwarzer Rahmen, wo Sie sehen können

Sowohl die Menü- als auch die Home-Offsets werden beim Ziehen versetzt.

Vollständiger Code

import SwiftUI

struct HomeView: View {
    
    @State var showMenu: Bool = false

    let menuWidth = UIScreen.main.bounds.width * 0.7
    
    ///x Koordinate von zu Hause(Blauer Kerl)
    @State var xPosition: CGFloat = 0
    @State var isDrag: Bool = false
    
    var drag: some Gesture {
        DragGesture()
            .onChanged{ value in
                isDrag = true
           
                // value.location.x - value.startLocation.Entfernung, in der x zieht
                //Stellen Sie die Maximal- und Minimalwerte mit Max und Min ein, um sich nicht zu stark zu bewegen
                if showMenu {
                    xPosition = max(min(menuWidth + value.location.x - value.startLocation.x, menuWidth), 0)
                } else {
                    xPosition = max(min(value.location.x - value.startLocation.x, menuWidth), 0)
                }
            }
            .onEnded{ value in
                
                //Ich möchte beurteilen, ob geöffnet oder geschlossen werden soll, wenn das Ziehen endet
                if value.location.x - value.startLocation.x >= menuWidth / 3 {
                    showMenu = true
                } else if -(value.location.x - value.startLocation.x) >= menuWidth / 3 {
                    showMenu = false
                }
                isDrag = false
            }
    }
    
    var body: some View {
        
        GeometryReader { geometry in
            VStack {
                HStack(spacing: 60) {
                    AvatarView(showMenu: $showMenu)
                    Spacer()
                }
                .padding(EdgeInsets.init(top: 8, leading: 8, bottom: 8, trailing: 8))
                Spacer()
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .offset(x: isDrag ? xPosition : (showMenu ? menuWidth : 0))
            .animation(.easeInOut(duration: 0.2))
            .background(Color.blue)
            .onTapGesture {
                if showMenu {
                    showMenu.toggle()
                }
            }
            .gesture(drag)

            SlideMenuView(showMenu: $showMenu)
                .frame(width: menuWidth, height: geometry.size.height)
                .offset(x: isDrag ? -menuWidth + xPosition : (showMenu ? 0 : -menuWidth))
                .animation(.easeInOut(duration: 0.2))
                .gesture(drag)

        }
    }
}

struct AvatarView: View {
    @Binding var showMenu: Bool
    
    var body: some View {
        Button(action: {
            self.showMenu.toggle()
            
        }) {
            Color.yellow
                .frame(width: 44, height: 44)
                .clipShape(Circle())
        }
    }
}


struct SlideMenuView: View {
    
    @Binding var showMenu: Bool
    
    var body: some View {
        VStack(spacing: 16) {
            Spacer()
            MenuRow(showMenu: $showMenu, title: "Account", icon: "gear")
            MenuRow(showMenu: $showMenu, title: "Billing", icon: "creditcard")
            MenuRow(showMenu: $showMenu, title: "Sign out", icon: "person.crop.circle")
            Spacer()

        }
        .background(Color.white)
    }
}

struct MenuRow: View {
    @Binding var showMenu: Bool
    
    var title: String
    var icon: String
    
    var body: some View {
        
        Button(action: {
            self.showMenu.toggle()
            
        }) {
            HStack(spacing: 16) {
                
                Image(systemName: icon)
                    .font(.system(size: 20, weight: .light))
                    .imageScale(.large)
                    .frame(width: 32, height: 32)
                
                Text(title)
                    .font(.system(size: 20, weight: .bold, design: .default))
                    .frame(width: 120, alignment: .leading)
                Spacer()
            }
            .padding(.horizontal, 30)

        }
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

Impressionen

Vielleicht könnte ich es etwas schöner umsetzen. .. .. Trotzdem ist die Swift-Benutzeroberfläche einfach zu schreiben.