SwiftUI如何添加占满导航工具栏与底部标签栏之间空间的视图

核心问题点 #

• 你手动给NavigationView添加了固定高度限制.frame(height: 200)，直接把导航栏+画布的整体高度锁死为200，是导致画布溢出导航栏、无法延伸到底部标签栏的核心原因
• 未明确声明画布的宽高填充属性，同时手势坐标判断没有绑定画布本地坐标空间，可能出现触摸位置和绘制位置偏移的问题
• 代码中存在数据不同步隐患：清空操作修改的是本地drawings数组，撤销操作修改的是绑定传入的image数组，两个数组操作不一致会导致功能异常

修复步骤 #

1. 移除错误的高度限制 #

删除CanvasView中NavigationView尾部的.frame(height: 200)修饰符，让导航视图自动适配父容器（也就是外层的TabView）的可用空间。

2. 优化画布布局 #

给DrawingPad添加宽高填充属性，让它撑满导航视图的可用空间：

// CanvasView 中 NavigationView 内部的 DrawingPad 调整为
DrawingPad(currentDrawing: $currentDrawing, image: $drawings, color: $initialColor, lineWidth: CGFloat(3))
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 填充所有可用空间

如果适配iOS16及以上系统，建议将已废弃的NavigationView替换为NavigationStack，布局适配性更好。

3. 同步数据操作（可选功能修复） #

统一撤销和清空操作的数据源，避免显示和存储不一致：

// 撤销按钮的操作修改为
if self.drawings.count > 0 {
    self.drawings.removeLast()
    undoDisabled = false
} else {
    undoDisabled = true
}

// 清空按钮的操作同步修改绑定的image数组
self.drawings = [Drawing]()
self.image = [Drawing]()

修改后画布会自动填充顶部导航栏和底部标签栏之间的所有可用空间，不会再出现溢出或者填充不足的问题。

内容的提问来源于stack exchange，提问作者Tycho Systems