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

Question

我试图制作一个包含3个页面和每个页面3张图片的选项卡视图。页面切换正常，但是选项卡视图会为我的图片创建垂直滚动条，并将它们推到底部。

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)
            }

任何想法为什么会发生这种情况？

- Baturay Koç

Answer 1

• 在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)
                }
            }
        }

- YodagamaHeshan

---

感谢 @Yodagama 的回答，不好意思，但我仍然遇到了同样的问题。 - Baturay Koç

是的，我确实复制并粘贴了。 - Baturay Koç

@BaturayKoç 我的意思是代码的其余部分！ - YodagamaHeshan

Answer 2

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

在下面的代码中，我使用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

---

嘿，Dabble，谢谢你的回答。我完全复制并粘贴了你的代码，但仍然遇到了同样的问题。而且在使用你的代码时发生了奇怪的事情；当我上下滚动页面时，图片会变大和变小。我不知道是怎么回事，但我认为导航栏可能是造成问题的原因。 - Baturay Koç