XCode13中NavigationView封装Label导致HStack布局异常如何解决

你遇到的布局错乱问题根源是NavigationView的使用方式错误：
NavigationView本身是容器视图，默认会自动拉伸填充父视图提供的所有可用空间，你单独给单个齿轮图标套NavigationView，才会导致图标四周出现多余的空白占位。

正确实现方案 #

不要在HStack内部给单个NavigationLink套NavigationView，将整个当前页面的根视图包裹一个NavigationView即可，代码示例：

// 整个当前页面的外层只需要套一次NavigationView
NavigationView {
    // 你原本的页面所有内容都放在这里，包括你用到的HStack
    HStack(spacing: 25) {
        // ... 其他标签代码

        // 直接写NavigationLink，不需要额外套NavigationView
        NavigationLink(destination: SettingsView()) {
            Image(systemName: "gear")
                .foregroundColor(.gray)
                .font(.title)
        }
    }
    // 如果不需要显示当前页面的导航栏，可以加以下两个修饰符
    .navigationBarTitle("")
    .navigationBarHidden(true)
    // 如果要跳转时是push效果而非子窗口模态效果，加这个修饰符即可
    .navigationViewStyle(.stack)
}

特殊场景适配（不推荐） #

如果你确实有业务需求不能给整个页面套NavigationView，非要在HStack局部用导航跳转，可以给单独的NavigationView强制设置固定尺寸、清除多余内边距：

HStack(spacing: 25) {
    // ... 其他标签代码
    
    NavigationView {
        NavigationLink(destination: SettingsView()) {
            Image(systemName: "gear")
                .foregroundColor(.gray)
                .font(.title)
        }
        .navigationBarTitle("")
        .navigationBarHidden(true)
    }
    // 固定尺寸刚好容纳图标，避免拉伸
    .frame(width: 30, height: 30)
    .navigationViewStyle(.stack)
}

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