ios - 带有 TabView、SwiftUI 的水平分页 ScrollView

Question

我正在尝试为每个页面制作一个带有 3 个图像的 3 页 tabview。分页没问题，但 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)
            }

知道为什么会这样吗？

Answer 1

为了确保 View 不会滚动，您可以限制图像大小并让它们调整到一定的高度。
在下面的代码中，我使用 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)
            }
        }
    }
}