Ios 如何在 SwiftUI 中将选项卡放在滚动视图中

你在正确的轨道上.TabView当不用作根时，将失go 正确调整其大小的能力.

这就是为什么我们需要指定它的minHeight.你可以用GeometryReader来解决这个问题.

然后只需给TabView一个selection，这样Tab按钮就可以工作了，而你很可能想要应用.tabViewStyle(.page(indexDisplayMode: .never))，以便能够在它们之间滑动.

工作演示:

GeometryReader { proxy in
    ScrollView {
        VStack {
            HStack {
                Image(systemName: "person.circle")
                Text("Some Text")
            }
        }
        
        LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
            Section {
                TabView(selection: $tabIndex) {
                    VStack {
                        Spacer()
                        Text("1")
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    .background(.red.opacity(0.5))
                    .tag(0)
                    
                    VStack {
                        Spacer()
                        Text("2")
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    .background(.green.opacity(0.5))
                    .tag(1)
                    
                    VStack {
                        Spacer()
                        Text("3")
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    .background(.blue.opacity(0.5))
                    .tag(2)
                }
                .tabViewStyle(.page(indexDisplayMode: .never))
                .frame(maxWidth: .infinity, minHeight: proxy.size.height)
            } header: {
                HStack {
                    Button {
                        withAnimation {
                            tabIndex = 0
                        }
                    } label: {
                        Text("Tab 1")
                    }
                    .buttonStyle(.bordered)
                    
                    Button {
                        withAnimation {
                            tabIndex = 1
                        }
                    } label: {
                        Text("Tab 2")
                    }
                    .buttonStyle(.bordered)
                    
                    Button {
                        withAnimation {
                            tabIndex = 2
                        }
                    } label: {
                        Text("Tab 3")
                    }
                    .buttonStyle(.bordered)
                }
                .padding()
                .frame(maxWidth: .infinity)
                .background(.regularMaterial)
            }
        }
    }
}

关于你的侧面问题:他们很可能仍然使用单一的滚动视图，但随后移动了滚动指示器的插页.你不能只用SwiftUI来做到这一点，但你需要反思一下底层的UIScrollView.SwiftUI-Introspect美元就够了.

然后根据您的需要调整verticalScrollIndicatorInsets