SwiftUI自定义TabBar层级问题：如何让视图显示在TabBar前方？

问题原因 #

当前CustomTabView通过.overlay附加在TabView之上，视图层级高于TabView内部所有子视图（包括TimerView中的NewTimerView），导致弹出的NewTimerView被TabBar遮挡。

修复方案 #

将NewTimerView移至ContentView的最顶层，通过额外的.overlay确保其层级最高。修改后的ContentView代码如下：

struct ContentView: View {
    @State private var tabSelection = 1
    @EnvironmentObject var timerModel: TimerModel
    var body: some View
    {
        TabView(selection: $tabSelection) {
            DashboardView()
                .tag(1)
            TimerView()
                .tag(2)
                .environmentObject(timerModel)
            SettingsView()
                .tag(3)
        }
        .overlay(alignment: .bottom)
        {
            CustomTabView(tabSelection: $tabSelection)
        }
        // 将NewTimerView放在最顶层overlay中
        .overlay {
            NewTimerView()
                .frame(maxHeight: .infinity, alignment: .bottom)
                .offset(y : timerModel.addNewTimer ? 0 : 600)
                .animation(.easeInOut, value: timerModel.addNewTimer)
        }
    }
}

额外调整说明 #

• 移除原NewTimerView代码中的.zIndex设置：现在它处于最顶层overlay，默认层级已高于CustomTabView，无需额外设置zIndex。
• 保持NewTimerView的视图定义不变：

@ViewBuilder
func NewTimerView()->some View
{
    VStack(spacing: 15) {
        Text("Change Timer Settings")
            .font(.title2.bold())
            .foregroundStyle(.black)
            .padding(.top, 10)
        // 保留原有其他内容...
    }
}

调整后，NewTimerView会显示在CustomTabView前方，不再被遮挡。

内容的提问来源于stack exchange，提问作者Branislav Fekeč