如何添加一个视图，使其位于导航工具栏和标签栏之间

Question

我正在尝试添加视图（绘图 canvas），因此它占据了顶部导航工具栏和底部选项卡栏之间的所有 space。

到目前为止，我得到了以下屏幕截图中的内容：

如您所见，canvas 'bleeding' 进入导航工具栏，并没有一直向下延伸到底部标签栏。

我的代码：

import SwiftUI

struct CanvasView: View {
    
    @State private var currentDrawing: Drawing = Drawing()
    @State private var drawings: [Drawing] = [Drawing]()
    @State private var colourPickerShown = false
    @State private var initialColor: Color = Color.black
    @State private var undoDisabled = true

    @Binding var colour: Color
    @Binding var image: [Drawing]
    
    @Environment(\.managedObjectContext) private var viewContext
    @FetchRequest(entity: Thing.entity(), sortDescriptors: []) var things: FetchedResults<Thing>
    
    var body: some View {
    
        NavigationView {
            DrawingPad(currentDrawing: $currentDrawing, image: $drawings, color: $initialColor, lineWidth: CGFloat(3))
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarLeading) {
                    Button(action: {
                    
                    }, label: {
                        Image("searchWeb")
                            .foregroundColor(.green)
                    })
                
                    Spacer()

                    Button(action: {
        
                    }, label: {
                        Image("photoLibrary")
                            .foregroundColor(.green)
                    })
                
                    Spacer()
                
                    Button(action: {
                    
                    }, label: {
                        Image("camera")
                            .foregroundColor(.green)
                    })
                
                    Spacer()

                    Button(action: {
        
                    }, label: {
                        Image("save")
                            .foregroundColor(.green)
                    })
                    
                    Spacer()
                    
                    Button {
                        self.colourPickerShown = true
                    } label: {
                        Image("pickAColour")
                    }
                }
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    Button(action: {
                        if self.image.count > 0 {
                            self.image.removeLast()
                            undoDisabled = false
                        } else {undoDisabled = true }
                    }, label: {
                        Image("undo")
                            .foregroundColor(.green)
                    })
                    
                    Spacer()
                    
                    Button(action: {
                        self.drawings = [Drawing]()
                    }, label: {
                        Image("delete")
                            .foregroundColor(.red)
                    })
                
                    Spacer()

                    Button(action: {
        
                    }, label: {
                        Image("share")
                            .foregroundColor(.green)
                    })
                
                    Spacer()
                
                    Button(action: {
                    
                    }, label: {
                        Image("canvasSettings")
                            .foregroundColor(.green)
                    })
                }
            }
        }
        .frame(height: 200)
        .sheet(isPresented: $colourPickerShown, onDismiss: {
            self.colourPickerShown = false
        }, content: { () -> ColourPicker in
            ColourPicker(colour: self.$colour, colourPickerShown: self.$colourPickerShown)
        })
    }
}

import SwiftUI

struct DrawingPad: View {
    @Binding var currentDrawing: Drawing
    @Binding var image: [Drawing]
    @Binding var color: Color
    
    var lineWidth: CGFloat
    
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                for drawing in self.image {
                    self.add(drawing: drawing, toPath: &path)
                }
                self.add(drawing: self.currentDrawing, toPath: &path)
            }
            .stroke(self.color, lineWidth: self.lineWidth)
            .background(Color(white: 0.95))
            .gesture(DragGesture(minimumDistance: 0.1)
                .onChanged({ (value) in
                    let currentPoint = value.location
                    if currentPoint.y >= 0 && currentPoint.y < geometry.size.height {
                        self.currentDrawing.points.append(currentPoint)
                    }
                })
                .onEnded({ (value) in
                    self.image.append(self.currentDrawing)
                    self.currentDrawing = Drawing()
                })
            )
        }
        .frame(maxHeight: .infinity)
    }
    
    private func add(drawing: Drawing, toPath path: inout Path) {
        let points = drawing.points
        if points.count > 1 {
            for i in 0..<points.count-1 {
                let current = points[i]
                let next = points[i+1]
                path.move(to: current)
                path.addLine(to: next)
            }
        }
    }
}

Answer 1

您将框架高度明确设置为 200：

.frame(height: 200)

如果删除该修饰符，它将占用所有可用的 space。

如何添加一个视图，使其位于导航工具栏和标签栏之间

How to add a view so it's between navigation toolbar and tab bar

swiftui

view

toolbar

tabbar

navigationview