SwiftUI中如何为TabView页面指示器添加上边距且不裁切内容

你之前给ZStack加padding会裁切内容的原因是padding作用于整个容器内的所有视图，相当于TabView本身的布局区域被缩小，所以底部内容会被提前裁切。以下两种方案均仅调整指示器位置，完全不改动TabView的布局区域，不会影响内部子页面的滚动和展示：

方案1：自定义页面指示器（最稳定，无副作用） #

隐藏系统自带的指示器，自己叠加可控位置的自定义指示器，完全适配你的父视图ignoresSafeArea需求：

var body: some View {
    ZStack(alignment: .bottom) {
        // 原有TabView，关闭系统自带指示器
        TabView(selection: $homeVM.selectedPageIndex) {
            // 你的子页面视图
        }
        .frame(width: UIScreen.main.bounds.width)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

        // 自定义指示器，自由调整偏移量
        PageControl(numberOfPages: 你的页面总数, currentPage: $homeVM.selectedPageIndex)
            .padding(.bottom, 30) // 此处数值就是向上偏移的距离，按需修改
    }
    .edgesIgnoringSafeArea(.all)
}

// 封装系统UIPageControl（iOS14+支持）
struct PageControl: UIViewRepresentable {
    var numberOfPages: Int
    @Binding var currentPage: Int
    
    func makeUIView(context: Context) -> UIPageControl {
        let control = UIPageControl()
        control.numberOfPages = numberOfPages
        // 可自行修改指示器颜色
        control.currentPageIndicatorTintColor = .black
        control.pageIndicatorTintColor = .lightGray
        return control
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.currentPage = currentPage
    }
}

方案2：全局修改UIPageControl内边距（代码改动最小） #

如果不想自定义指示器，可通过全局Appearance配置给所有页面指示器加底部内边距，仅需加一行代码：
在BaseLaunchView的onAppear生命周期里添加配置即可：

struct BaseLaunchView: View {
    // 原有属性不变
    var body: some View {
        VStack {
            // 原有逻辑不变
        }
        .padding()
        .environmentObject(baseNavVM)
        .ignoresSafeArea()
        .onAppear {
            // 底部加30内边距，等价于指示器向上偏移30单位，按需修改数值
            UIPageControl.appearance().backgroundInsets = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
        }
    }
}

注意：该方案是全局生效，如果App内其他页面也用到了PageControl，需要确认是否会影响其他页面的样式

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