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

Posted 2023-03-23

【中文标题】如何添加视图，使其位于导航工具栏和标签栏之间

【英文标题】：How to add a view so it's between navigation toolbar and tab bar

【发布时间】：2021-11-12 14:06:44

【问题描述】：

我正在尝试添加一个视图（绘图画布），因此它会占用顶部导航工具栏和底部标签栏之间的所有空间。

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

如您所见，画布“渗入”导航工具栏，并没有一直延伸到底部标签栏。

我的代码：

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)
            
        
    

【问题讨论】：

你能创建一个minimal reproducible example吗？比如DrawingPad是什么？

@aheze 我添加了 DrawingPad，这是处理我试图添加到我的画布选项卡中的绘图的视图。

您明确将框架的高度设置为 200。如果您删除它，它会出售整个空间吗？

@jnpdx 是的！出于某种原因，我想到框架修改器是颜色选择器表的一部分。谢谢。

【参考方案1】：

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

.frame(height: 200)

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