SwiftUI中TabView占用全部屏幕空间的问题修复

问题原因 #

使用PageTabViewStyle的TabView默认会填充父容器的所有可用空间——即便内部的子视图（Onboard1/2/3）没有铺满屏幕，它也会自动拉伸以占满剩余空间，导致整体布局失衡。

解决方案 #

你可以通过以下几种方式限制TabView的尺寸：

1. 让TabView自适应子视图高度

给TabView添加fixedSize(vertical: true)修饰符，让它在垂直方向上仅包裹子视图的实际高度：

VStack {
    TabView(selection: $selectedPage) {
        Onboard1()
            .tag(0)
        Onboard2()
            .tag(1)
        Onboard3()
            .tag(2)
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .onChange(of: selectedPage) { _ in
        textInBtn = changeTextInBtn()
    }
    .fixedSize(horizontal: false, vertical: true) // 关键修饰符
    
    GenerateCapsule(selectedPage: $selectedPage, countPage: 3)
    Spacer()
    Button(action: {
        withAnimation(.easeInOut(duration: 0.4)) {
            selectedPage+=1
        }
    }) {
        Text(textInBtn)
            .foregroundColor(.text)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 17)
            .background(.block)
            .clipShape(RoundedRectangle(cornerRadius: 13))
    }
    .padding(.horizontal,20)
}

2. 设置固定高度

如果知道子视图的大致高度，直接给TabView设置固定高度：

TabView(...) { ... }
.tabViewStyle(...)
.onChange(of: selectedPage) { ... }
.frame(height: 350) // 根据实际需求调整高度值

3. 按比例分配空间

使用GeometryReader获取父容器的尺寸，按比例给TabView分配高度：

VStack {
    GeometryReader { geometry in
        TabView(selection: $selectedPage) {
            Onboard1()
                .tag(0)
            Onboard2()
                .tag(1)
            Onboard3()
                .tag(2)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .onChange(of: selectedPage) { _ in
            textInBtn = changeTextInBtn()
        }
        .frame(height: geometry.size.height * 0.6) // 占父容器高度的60%
    }
    
    GenerateCapsule(selectedPage: $selectedPage, countPage: 3)
    Spacer()
    Button(action: {
        withAnimation(.easeInOut(duration: 0.4)) {
            selectedPage+=1
        }
    }) {
        Text(textInBtn)
            .foregroundColor(.text)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 17)
            .background(.block)
            .clipShape(RoundedRectangle(cornerRadius: 13))
    }
    .padding(.horizontal,20)
}

补充说明 #

之前给TabView嵌套VStack效果不佳，是因为VStack默认也会扩展到可用空间，没有从根本上限制TabView的尺寸。上述方法直接针对TabView本身的尺寸进行控制，能更精准地调整布局。

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