SwiftUI 调整TabView亮度时子视图垂直位置偏移问题求解

问题原因 #

你遇到的偏移问题本质是iOS 15+ 中NavigationView的默认标题显示模式和视觉修饰符的重绘逻辑冲突导致的：brightness这类视觉修饰符会触发父视图重绘，而默认使用.automatic模式的NavigationView在重绘时会错误地在大标题/普通标题布局之间切换，最终表现为内部内容垂直偏移，和亮度调整本身的逻辑无关。

解决方案 #

方案1：固定NavigationView的标题显示模式 #

强制给所有NavigationView指定固定的标题显示模式，避免自动切换导致的布局抖动，修改后代码如下：

struct ContentView: View {
    @State var press: Bool = false
    
    var body: some View {
        ZStack {
            TabView {
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                    .navigationTitle("")
                    .navigationBarTitleDisplayMode(.inline)
                }
                .tabItem {
                    Image(systemName: "square.stack").font(.title)
                    Text("View One")
                }
                
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                    .navigationTitle("")
                    .navigationBarTitleDisplayMode(.inline)
                }
                .tabItem {
                    Image(systemName: "checkmark.square")
                    Text("View Two")
                }
            }
            .brightness(press ? -0.1: 0)
        }
    }
}

如果需要保留大标题样式，把.inline换成.large即可。 #

方案2：使用半透明覆盖层替代brightness调整 #

这种方案不需要修改原有导航栏配置，调暗效果和brightness(-0.1)几乎一致，且不会触发内部视图的布局重计算，适配性更强：

struct ContentView: View {
    @State var press: Bool = false
    
    var body: some View {
        ZStack {
            TabView {
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                }
                .tabItem {
                    Image(systemName: "square.stack").font(.title)
                    Text("View One")
                }
                
                NavigationView {
                    Button(action: { press.toggle() }) {
                        Text("Toggle")
                    }
                }
                .tabItem {
                    Image(systemName: "checkmark.square")
                    Text("View Two")
                }
            }
            .overlay(
                Color.black
                    .opacity(press ? 0.1 : 0)
                    .allowsHitTesting(false)
            )
        }
    }
}

其中allowsHitTesting(false)是为了保证下层视图的交互不会被覆盖层拦截，不影响原有操作逻辑。 #

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