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

Posted 2023-02-24

【中文标题】导航视图 - 侧边栏等注释 - 切换按钮

【英文标题】：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)
    
    // ...

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

【参考方案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)