带有 TabView、SwiftUI 的水平分页滚动视图

Posted 2023-02-24

【中文标题】带有 TabView、SwiftUI 的水平分页滚动视图

【英文标题】：Horizontal Paging Scrollview with TabView, SwiftUI

【发布时间】：2020-12-28 20:57:12

【问题描述】：

我正在尝试制作一个 3 页的 tabview，每页有 3 张图片。分页可以，但 tabview 会为我的图像创建一个垂直滚动并将它们推到底部。

VStack
                TabView(selection: $currentIndex.animation()) 
                    ForEach(0 ..< 3, id: \.self) i in
                        VStack
                            Image("wp\(i + 1)")
                        .background(Color.blue)
                    
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)).background(Color.yellow)
            

知道为什么会这样吗？

【参考方案1】：

为确保视图不滚动，您可以限制图像大小并让它们调整到特定高度。

在下面的代码中，我使用 GeometryReader 和 Image 修饰符在没有垂直滚动条的情况下在每个选项卡上放置任意数量的图像：

struct ContentView : View 
    @State var currentIndex:Int = 0
    @State var imagesPerTab:Int = 1
    
    var body: some View 
        GeometryReader  geo in
            
            // limit image height within 90% of tab height
            // this guarantees the images will not cause a vertical scroll
            let heightPerImage = (geo.size.height * 0.9) / CGFloat(imagesPerTab)
            
            VStack 
                // added a button to see effect of adding as many images as wanted
                Button(action:imagesPerTab += 1) 
                    Image(systemName:"plus.app")
                        .resizable()
                        .aspectRatio(contentMode:.fit)
                        .frame(height:geo.size.height * 0.05) // button can only be 5% of height
                
                TabView(selection: $currentIndex.animation()) 
                    ForEach(0 ..< 3, id: \.self) i in
                        
                        // tab
                        VStack(spacing:0)  // remove vertical spacing between images
                            ForEach(0 ..< imagesPerTab, id: \.self) _ in
                                Image(systemName:"flame")
                                    .resizable() // image resize freely
                                    .aspectRatio(contentMode:.fit) // image doesn't skew
                                    .frame(height:heightPerImage) // limit image to this height
                            
                        
                        .background(Color.blue)
                    
                
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    .background(Color.yellow)
            
        
    

【讨论】：

嘿 Dabble，感谢您的回答。我完全复制并粘贴了您的代码，但仍然遇到同样的问题。你的代码发生了一件奇怪的事情；当我上下滚动时，图像变得越来越小。 Idk，但我认为导航栏以某种方式导致了问题。

【参考方案2】：

默认情况下，在 SwiftUi 中，Image 获取实际图像大小。到 调整它的大小，我们必须在添加 frame() 之前使其成为 resizable() . 要获得视图本身可以获得的尺寸， 使用GeometryReader。 tag是用来做选择的，所以选择的类型 变量和标签参数的类型应该相同。

struct ContentView: View 
            
            @State var selection = 0
            var body: some View 
                VStack
                    TabView (selection: $selection)
                        ForEach(0 ..< 3, id: \.self) i in
                            VStack
                                GeometryReader  proxy in //<- here
                                    Image(systemName: "pencil")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit) //<- here
                                        .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center) //<- here
                                        .tag(i) //to get selection
                                
                            .background(Color.blue)
                        
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)).background(Color.yellow)
                
            
        

【讨论】：

感谢您回答@Yodagama，抱歉，还是遇到了同样的问题

是的，我完全复制并粘贴了

@BaturayKoç 我指的是其余的鳕鱼！