TabView 内的内容不会在 ScrollView 内增长

Question

我的项目面临着非常严重的问题。场景是这样的。

SwiftUi 屏幕有 NavigationBar -> Sticky Header -> Horizontal TabBarItems ->

TabView

然后每个

TabView

都有它自己的

View

根据需要使用

ListView

或

ScrollView

问题是

ListView

或

ScrollView

甚至不会根据内容自动增长

its not visible until not giving the height to TabView or ContentView

而且我无法计算内容高度并将其提供给页面，因为内容吃得太动态和大了。

示例代码如下-

struct ContentView: View {
    var body: some View {
        VStack {
            VStack{
                Text("Sticky Header")
            }
            ScrollView {
                HeaderView()
                
                CustomTabView()
                    .frame(height: 100) <--- I don't want to give this height anymore.
            }
        }
        .padding()
    }
}

struct HeaderView: View {
    var body: some View {
       Image("W")
            .resizable()
            .frame(minWidth: 0, maxWidth: .infinity)
            .frame(height: 200)
    }
}

struct CustomTabView: View {
    var body: some View {
        TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

struct FirstTavView: View {
    var body: some View {
        List(0..<100) { index in
            Text("Index number is --- > \(index)")
        }
    }
}

线框是：

Answer 1

LazyVStack(spacing: 1, pinnedViews: [.sectionHeaders]) {
    // ...
}

您的解决方案只是使用 pinnedViews 的 LazyVStack 和 StickeyHeader。内部布局将随着您的内容而增长。 并通过为 tabview 设置框架来控制您的父母。

TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .frame(w : h)
        .tabViewStyle(.page(indexDisplayMode: .never))

    ```

Answer 2

我是这项技术的新手，但我想我有解决方案。

  LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 4), count: 3), spacing: 4,content: {
            ForEach(1...19,id: \.self) {index in
                   GeometryReader { post in
//
                           let width = post.frame(in: .global).width
                                    
                            ImageView(index: index, width: width)
                      }
                                .frame(height: 120)