TabView（页面样式）无法缩放以适应它的项目 swiftUI

Posted 2023-03-10

【中文标题】TabView（页面样式）无法缩放以适应它的项目 swiftUI

【英文标题】：TabView ( page style) does not scale to fit it's item swiftUI

【发布时间】：2021-12-26 19:01:30

【问题描述】：

我在移动应用程序上使用 tabView 作为滑动标题我有一个用于 tabItem 视图的对象、一个用于 TabView 的对象和另一个作为主视图的对象 问题是写在 mainView 上的对象没有足够的高度来显示 tabItems 宽。这是我写的代码：

//This code is used to make a view for tabItem
struct FeaturedItemView: View 
    // MARK: - PROPERTIES
    var player: Player
    
    var body: some View 
        Image(player.image)
            .resizable()
            .scaledToFit()
            .cornerRadius(12)
    

//This Code is used for create a view for TabView object
struct FeaturesTabView: View 
    // MARK: - PROPERTIES

    // MARK: - BODY
    var body: some View 
        TabView 
            ForEach(players)  player in
                FeaturedItemView(player: player)
                    .padding(.top, 10)
                    .padding(.horizontal, 15)
                    
            //: FOREACH
        //: TABVIEW
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    

//This is the mainView
struct ContentView: View 
  
  // MARK: - BODY
    var body: some View 
        ZStack 
            VStack(alignment: .center, spacing: 10) 
                NavigationBarView()
                    .padding(.horizontal, 15)
                    .padding(.bottom)
                    .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
                    .background(Color.white)
                    .shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 5)
                
                ScrollView(.vertical, showsIndicators: false) 
                    VStack(spacing: 0) 
                        // The issue is occurred here
                        // ******************
                        FeaturesTabView()
                            .padding(.vertical, 20)
                        //****************

                        FooterView()
                            .padding(.horizontal)
                    //: VSTACK
                    
                //: SCROLL
                
            //: VSTACK
            .background(colorBackground.ignoresSafeArea(.all, edges: .all))
        
        .ignoresSafeArea(.all, edges: .top)
    

显示的视图如下所示：

但预期的视图如下：

【参考方案1】：

问题是您的FeaturesTabView 在没有.frame 的情况下在ScrollView 中崩溃。为了使其具有适应性，请将GeometryReader 放在您的视图上，然后将您的.frame() 设置为您希望它占据的屏幕的任何部分。例如，我给了它屏幕高度的 1/3。因为.scaledToFit()，图像会扩大它的宽度以保持在屏幕上的比例，所以你不需要在框架上设置宽度。

struct ContentView: View 
  
  // MARK: - BODY
    var body: some View 
        GeometryReader  geometry in
            ZStack 
                VStack(alignment: .center, spacing: 10) 
                     NavigationBarView()
                         .padding(.horizontal, 15)
                         .padding(.bottom)
                         .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
                         .background(Color.white)
                         .shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 5)
                
                      ScrollView(.vertical, showsIndicators: false) 
                          VStack(spacing: 0) 
                            // Put a frame on your view to prevent it from collapsing in the ScrollView
                             FeaturesTabView()
                               .padding(.vertical, 20)
                               .frame(width: geometry.size.width, height: geometry.size.height / 3)

                            FooterView()
                               .padding(.horizontal)
                       //: VSTACK
                    
                   //: SCROLL
                
               //: VSTACK
               .background(colorBackground.ignoresSafeArea(.all, edges: .all))
           
           .ignoresSafeArea(.all, edges: .top)
        //: GEOMETRYREADER
    

【讨论】：

感谢您的回答@Yrb，问题是我无法根据整个滚动视图高度定义 FeaturesTabView 高度大小，因为滚动视图高度将是动态的，它将通过添加项目来更改。我必须将 FeaturesTabView 的大小设置为 FeaturedItemView 的大小，以适应它的大小。

这是一个ScrollView。它存在的全部原因是包含比屏幕上显示的更多的信息。如果您希望FeaturesTabView 以特定大小显示，您将不得不给它那个大小。我做了一个 1/3 的例子，但是你可以随意设置它。