与 ScrollView 结合的自定义选项卡视图的问题

Posted 2023-02-23

【中文标题】与 ScrollView 结合的自定义选项卡视图的问题

【英文标题】：Issues with a custom tab view combined with ScrollView

【发布时间】：2021-05-20 11:54:00

【问题描述】：

我的标签视图看起来很棒。事实上，一切看起来都很好。但是使用当前代码。 ScrollView 在标签栏后面而不是在上面结束。我猜这与它是一个 ZStack （它 - 意思是内容）有关。

我尝试在开关内的每个视图上添加填充（填充底部与标签栏高度相同但不起作用）。

我得到的两个结果是它不能滚动到足以看到所有内容但标签栏看起来不错。

或

滚动效果很好，但标签栏在显示空白时在视觉上存在一些重叠问题。 我只是不知道如何再移动代码以获得更好的结果。 :(

//Landing-page..

        VStack 
            ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) 
            switch tabController.selectedIndex 
                case 0:
                    HomeView()
                        .padding(.bottom, 50)
                case 1:
                    Text("Test..")
                case 2:
                    Text("Test...")
                case 3:
                    Text("Test....")
                default:
                    VStack 
                        Text("Default View")
                    
                
                
                CustomTabView()
            
        
        .background(Color.gray.ignoresSafeArea()).edgesIgnoringSafeArea(.bottom)

// TabView..

        HStack 
            // tabControllers.icons.count = 4 tabs at the moment
            ForEach(0..<tabController.icons.count, id: \.self)  tab in
                Button(action: 
                    // animation when changing tab comes here eventually
                    tabController.selectedIndex = tab
                , label: 
                        Spacer()
                        Image(systemName: tabController.icons[tab])
                            .frame(width: 50, height: 50)
                            .font(.system(
                                    size: 22,
                                    weight: tabController.selectedIndex == tab ? .semibold : .regular,
                                    design: .default))
                            .foregroundColor(tabController.selectedIndex == tab ? Color.themeAccent : Color.themeAccent.opacity(0.3))
                            .background(tabController.selectedIndex == tab ? Color.primaryPurple : nil)
                            .cornerRadius(tabController.selectedIndex == tab ? 30 : 0)
                        Spacer()
                )
            
        
        .padding()
        .background(Color.blue)
        .clipShape(CShape())
        .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0.0, y: 0.0)

ScrollView 从 HomeView 的顶部开始。

Tab view showing correctly, but not scrollview

ScrollView showing correctly, but not tab view

【参考方案1】：

我认为您可以摆脱ZStack，将开关/外壳放在VStack 和下面的CustomTabView() 中。 ScrollView 会将CustomTabView 推到底部而不是重叠。如果切换中的视图不是ScrollViews，那么您可以在CustomTabView 上方添加Spacer()，这会将视图推到顶部和底部。