Swift UI：TabView 内部滚动视图不起作用

Question

我想将 tabView 放入滚动视图中，但是当我这样做时，即使 tabview 的内容存在，它也不会显示。我该如何修复这个错误？根据评论的建议，更新使用了儿童尺寸的阅读器。请参考其他线程以获取儿童尺寸阅读器的代码。

选项卡视图中内容的大小是动态的。我知道我为每个项目的框架高度添加了 800，但这可以改变。

import SwiftUI

struct SwiftUIView: View {
    @State var selectedFilter = 1
    var body: some View {
        VStack {
            Color.blue.frame(height: 85) //header
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                    
                    
                    Color.green.frame(height: 100) //view body
                    
                    
                    //red color is tabview header
                    Section(header: Color.red.frame(height: 30)) {
                        //view content (THIS DOESNT SHOW)
                        TabView(selection: $selectedFilter) {
                            Color.yellow.frame(height: 800).tag(1)
                            Color.black.frame(height: 800).tag(2)
                            Color.indigo.frame(height: 800).tag(3)
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    SwiftUIView()
}

更新答案

struct SwiftUIView: View {
    @State var selectedFilter = 1
    var body: some View {
        VStack {
            Color.blue.frame(height: 85) //header
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                    
                    
                    Color.green.frame(height: 100) //view body
                    
                    
                    //red color is tabview header
                    Section(header: Color.red.frame(height: 30)) {
                        //view content (THIS DOESNT SHOW)
                        VStack {
                            ZStack {
                                if selectedFilter == 1 {
                                    Color.yellow.frame(height: 5000)
                                } else if selectedFilter == 2 {
                                    Color.green.frame(height: 100)
                                }
                                HStack {
                                    Button("Tab 1") { selectedFilter = 1 }
                                    
                                    Button("Tab 2") { selectedFilter = 2 }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Answer 1

您想在 SwiftUI 中将

TabView

放置在

ScrollView

内：

+----------------------------------------+
|                                        |
|                 Header                 |
|                                        |
+----------------------------------------+
|                                        |
|              ScrollView                |
|                                        |
|    +-------------------------------+   |
|    |                               |   |
|    |          LazyVStack           |   |
|    |                               |   |
|    +-------------------------------+   |
|    |            TabView            |   |
|    | (Content not displaying)      |   |
|    +-------------------------------+   |
|                                        |
+----------------------------------------+

可以使用

GeometryReader

来适应内容的大小，而不是使用不适应动态内容的固定帧大小。但是，您提到直接使用

GeometryReader

并没有达到预期效果。
您已更新代码以使用

ChildSizeReader

，但它仍然不显示内容。

考虑在

TabView

中包含

ScrollView

的设计含义。如果

TabView

的内容也是可滚动的，这可能会导致用户体验混乱。通常建议将滚动上下文分开。

然而，正如评论中所建议的，创建一个模仿

TabView

行为的自定义组件可能会更有效。
其中可以包括用于选项卡选择的水平行按钮和用于显示所选选项卡内容的

ZStack

。这种方法提供了更多的控制，并且可以适应在

ScrollView

内工作。

你会得到：

+----------------------------------------+
|                                        |
|                 Header                 |
|                                        |
+----------------------------------------+
|                                        |
|              ScrollView                |
|                                        |
|    +-------------------------------+   |
|    |                               |   |
|    |          LazyVStack           |   |
|    |                               |   |
|    +-------------------------------+   |
|    |        Custom Tab View        |   |
|    | (With dynamic size handling)  |   |
|    +-------------------------------+   |
|                                        |
+----------------------------------------+

举个例子：

struct CustomTabView: View {
    @State var selectedTab = 1
    var body: some View {
        VStack {
            // Tab selector
            HStack {
                Button("Tab 1") { selectedTab = 1 }
                Button("Tab 2") { selectedTab = 2 }
                // Add more tabs as needed
            }

            // Tab content
            ZStack {
                if selectedTab == 1 {
                    Color.yellow // Replace with actual content
                } else if selectedTab == 2 {
                    Color.green // Replace with actual content
                }
                // Add more content views as needed
            }
        }
    }
}