首页 > 解决方案 > 向 TabView 页面指示器添加填充

问题描述

我有一个 TabView 视图,其样式PageTabViewStyle(indexDisplayMode: .always看起来非常适合我的用例,但是页面指示器正向上跳到屏幕底部附近的安全区域,看起来很糟糕。我想将页面指示器移动到某个n值。这是我复制它的一个示例。如果此视图是在任何没有 Home 按钮的设备上构建的,它将位于 home 指示器线的顶部。

var body: some View {
    ZStack {
        TabView(selection: $homeVM.selectedPageIndex) {
            // Any number of views here.
        }
        .frame(width: UIScreen.main.bounds.width)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
    }.edgesIgnoringSafeArea(.all)
}

我试图将填充添加到 ZStack,它确实有效,但是我的 TabView 在底部被切断,这意味着我的单元格过早地消失了。

这是我要修复的图像。请注意页面指示器位于主页栏指示器上。我需要将指标向上推,而不需要将背景 ScrollView 向上推

在此处输入图像描述

更新#1

此视图由我用来处理导航堆栈的基本视图呈现。观点如下。这里要注意的重要一点是.ignoresSafeArea()我对这个观点的看法。我这样做是因为它是我最终的 TabView 的包含视图。有趣的是,如果我删除此修饰符,指示器会向上移动到更易于管理的位置,但是当滚动时,我的表单会在设备的顶部和底部被夹住,这并不理想。

struct BaseLaunchView: View {
    @StateObject var baseNavVM = BaseLaunchViewModel()
    @State var shouldLogin = false
    @State var shouldRegister = false

    var body: some View {
        VStack {
            switch baseNavVM.loggedIn {
            case true:
                HomeView()
            default:
                NavigationView {
                    VStack{
                        Spacer()

                        VStack(spacing: 30) {
                            VStack {
                                Text("Stello")
                                    .font(Fonts.title)
                                Text("Life Groups")
                                    .font(Fonts.body)
                            }

                            StelloDivider()

                            Text("Connect with like minded people, to fellowship and find your home.")
                                .font(Fonts.subheading)
                                .multilineTextAlignment(.center)
                        }

                        Spacer()

                        NavigationLink(destination: RegisterOptionsView(isLoggingIn: true), isActive: $shouldLogin) {
                            Button(action: {
                                shouldLogin.toggle()
                            }, label: {
                                Text("Login")
                                    .font(Fonts.button)
                            }).buttonStyle(StelloFillButtonStyle())
                        }

                        NavigationLink(destination: RegisterOptionsView(isLoggingIn: false), isActive: $shouldRegister) {
                            Button(action: {
                                shouldRegister.toggle()
                            }, label: {
                                Text("Register")
                                    .font(Fonts.button)
                            }).buttonStyle(StelloHollowButtonStyle())
                        }
                    }
                }.accentColor(.black)
            }
        }
        .padding()
        .environmentObject(baseNavVM)
        .ignoresSafeArea()
    }
}

标签: swiftuser-interfaceswiftuiuser-experience

解决方案


推荐阅读