开启Button Shapes后SwiftUI TabView搭配NavigationView出现异常UI求助

开启Button Shapes辅助功能后，NavigationView顶部出现的三个矩形，本质是系统给隐藏/占位的可交互按钮渲染的轮廓——这个功能的作用就是给所有可点击的Button元素添加可视化边框，哪怕这些按钮被设置为隐藏或者是系统默认的布局占位。

具体诱因 #

1. 你用.navigationBarBackButtonHidden(true)隐藏了返回按钮，但系统并未完全移除该按钮的布局占位区域，这个区域仍被标记为可交互元素，开启Button Shapes后就会显示出轮廓。
2. TabView与NavigationView的嵌套结构，可能导致系统在导航栏区域生成了额外的默认可交互控件占位（比如空的右侧导航按钮），这些占位同样会被Button Shapes渲染。

解决办法 #

方法1：强制替换导航栏的占位元素

给NavigationView添加.navigationBarItems，用EmptyView()替换左右两侧的默认占位，彻底消除可交互的占位区域：

NavigationView {
    VStack(spacing: 20) {
        // 你的页面内容
    }
    .padding(.horizontal)
    .padding(.bottom, 30)
}
.navigationTitle("account".localized())
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: EmptyView(), trailing: EmptyView()) // 新增该行
.navigationViewStyle(.stack)

方法2：调整嵌套结构（如果业务允许）

如果你的页面逻辑支持，将NavigationView移到TabView的外层，避免每个Tab页单独创建NavigationView带来的系统控件冗余：

NavigationView {
    TabView {
        ProfileView()
            .tabItem {
                Image(systemName: "account")
                Text("Profile")
            }
        // 其他Tab页
    }
}
.navigationTitle("account".localized())
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true)
.navigationViewStyle(.stack)

额外排查点

如果上述方法无效，检查是否在导航栏区域有自定义的可交互元素未正确处理，或者测试不同iOS版本——部分旧版本iOS中Button Shapes对导航栏控件的渲染存在小bug，升级系统可能也能解决问题。

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