Mac Catalyst中使用.principal布局导致工具栏高度异常升高

问题原因 #

在Mac Catalyst环境中，.principal这个工具栏布局位置的默认设计是为标题类元素预留的，它会自动分配更大的垂直空间，导致工具栏被拉伸至接近两倍高度，出现多余空白。

解决方法 #

1. 限制按钮的垂直尺寸

直接给.principal区域内的按钮设置固定高度，强制缩小内容占据的垂直空间，工具栏会自动适配高度：

.toolbar {
    ToolbarItemGroup(placement: .principal) {
        Button {
            toggle.toggle()
        } label: {
            Text("MyButton")
                .foregroundColor(Color.accentColor)
        }
        .frame(height: 32) // 可根据实际需求调整高度数值
    }
}

2. 替换为单个ToolbarItem而非ToolbarItemGroup

ToolbarItemGroup自带额外的内边距和布局规则，改用单个ToolbarItem可以减少不必要的空间占用：

.toolbar {
    ToolbarItem(placement: .principal) {
        Button {
            toggle.toggle()
        } label: {
            Text("MyButton")
                .foregroundColor(Color.accentColor)
        }
    }
}

3. 应用紧凑工具栏样式

通过设置统一紧凑的工具栏样式，强制压缩整体高度：

.navigationViewStyle(.columns)
.toolbarStyle(UnifiedCompactToolbarStyle())
.toolbar {
    ToolbarItemGroup(placement: .principal) {
        Button {
            toggle.toggle()
        } label: {
            Text("MyButton")
                .foregroundColor(Color.accentColor)
        }
    }
}

4. 调整导航栏显示模式（辅助优化）

结合导航栏标题显示模式，进一步优化布局空间：

.navigationBarTitleDisplayMode(.inline)
.toolbar {
    ToolbarItemGroup(placement: .principal) {
        Button {
            toggle.toggle()
        } label: {
            Text("MyButton")
                .foregroundColor(Color.accentColor)
        }
    }
}

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