导航视图 - 侧边栏等注释 - 切换按钮答案

【问题标题】：Navigation View -Notes Like Sidebar - Toggle button导航视图 - 侧边栏等注释 - 切换按钮
【发布时间】：2021-08-07 17:58:39
【问题描述】：

我对 iOS 开发和 Swift UI 非常陌生。我正在为我们公司制作一个应用程序。我相信 Apple Notes 之类的方法是最好的。我让大多数工作坦克参加了一些 Udemmy 课程和几周的激烈谷歌搜索。但我不知道如何实现切换侧边栏按钮。我可能正在寻找一些显而易见的东西，但使用了错误的术语。

我说的是这个：

当我删除大部分代码时，我有这样的结构：

NavigationView {
    List {
        Section(header: RoomHeader()) {
            ForEach(sections) { section in
                NavigationLink(destination: ViewRoom(section: section)) {
                    RoomListItem(section: section)
                }
            }
        }
    }
    .navigationTitle("Rooms")
    .listStyle(InsetGroupedListStyle())
}

ViewRoom 类

import SwiftUI

struct ViewRoom: View {
    var room: RoomModel
    
    var body: some View {
        ZStack {
            ScrollView {
                VStack {
                    controls
                    title
                    // ....
                }
                .padding()

            }

            bottomBar

        }
        .navigationTitle(room.name)
        .navigationBarItems(
            trailing: HStack {
                // ...
            }
        )
    }
    
    var controls: some View {
        HStack {
            Spacer()
            
            // Couldn't find the icon on SF Symbols but this is the toggle button
            Button(action: {}, label: {
                Image(systemName: "rectangle.portrait.arrowtriangle.2.outward")
            })
        }
        .font(.system(size: 24))
        .padding(.top, 15)
    }
    // ...
}

如果您能告诉我如何实现此切换功能，我将不胜感激。

【问题讨论】：

标签： ios swift swiftui swiftui-navigationview

【解决方案1】：

您可以使用 SwiftUI 的Zstack & animation & transition 功能。我为您制作了一个示例，以便您更深入地研究它并进一步探索上述概念。

struct ContentView: View {
    @State private var showDetails = false
    
    var body: some View {
        ZStack {
            if showDetails {
                LeftView()
                    .transition(.move(edge: .leading))
                    .zIndex(1)
            } else {
                Button("Press to show details") {
                    withAnimation(.spring()) {
                        showDetails.toggle()
                    }
                }
            }
        }
        .onTapGesture {
            withAnimation(.spring()) {
                showDetails.toggle()
            }
        }
    }
}

下面是leftView，它会从左边开始动画

struct LeftView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Hello, World!")
                    
            }
                .frame(width: 200, height: geometry.size.height)
                .background(Color.blue)
        }
    }
}

【讨论】：