如何将 NavigationView 从具有固定尺寸的 TabView 扩展到全屏？答案

【问题标题】：How to expand a NavigationView to full screen from a TabView with fixed dimensions?如何将 NavigationView 从具有固定尺寸的 TabView 扩展到全屏？
【发布时间】：2026-02-04 23:05:01
【问题描述】：

我有一个VStack，它结合了两个视图。一个是常规的Rectangle，另一个是在其他矩形中旋转的TabView。其中一个矩形就像NavigationView 中的一个按钮，它向用户呈现日历。

在我当前的代码中，日历的大小与TabView 相同，但我希望日历扩展到全屏（移除绿色矩形并转到完全不同的视图）。怎样才能做到这一点？

当前代码

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            Rectangle()
                .cornerRadius(15)
                .foregroundColor(Color.green)
                .frame(width: .infinity, height: 250)
            TabView {
                Rectangle()
                    .cornerRadius(15)
                    .foregroundColor(Color.blue)
                    .frame(width: .infinity, height: 300)
                Rectangle()
                    .cornerRadius(15)
                    .foregroundColor(Color.black)
                    .frame(width: .infinity, height: 300)
                NavigationView {
                    NavigationLink(destination: CalendarView()) {
                        Text("Tap for calendar.")
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode.always))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

它看起来像什么

【问题讨论】：

标签： ios swiftui

【解决方案1】：

原来你只需要将整个东西包裹在 NavigationView...

mport SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationView {
        VStack {
            Rectangle()
                .cornerRadius(15)
                .foregroundColor(Color.green)
                .frame(width: .infinity, height: 250)
            TabView {
                Rectangle()
                    .cornerRadius(15)
                    .foregroundColor(Color.blue)
                    .frame(width: .infinity, height: 300)
                Rectangle()
                    .cornerRadius(15)
                    .foregroundColor(Color.black)
                    .frame(width: .infinity, height: 300)
                NavigationView {
                    NavigationLink(destination: CalendarView()) {
                        Text("Tap for calendar.")
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            .indexViewStyle(.page(backgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode.always))
        }
    }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

【讨论】：