ScrollView 中的 SwiftUI TabView 不尊重孩子的高度

Question

我在 ScrollView 中有一个 TabView。即使我给 Color.orange 指定了 500 的固定高度，TabView 的高度也没有按应有的方式扩展。

仅当 TabView 在 ScrollView 中渲染时才会出现该问题。

struct TabViewProblems: View {
    
    var body: some View {
        ScrollView {
            TabView(selection: .constant(0), content:  {
                Color.orange.height(500)
            })
            .tabViewStyle(.page(indexDisplayMode: .always))
        }
    }
}

当 TabView 或 ScrollView 单独存在时，不存在此问题。

struct TabViewProblems: View {
    
    var body: some View {
        ScrollView {
//            TabView(selection: .constant(0), content:  {
                Color.orange.height(500)
//            })
//            .tabViewStyle(.page(indexDisplayMode: .always))
        }
    }
}

struct TabViewProblems: View {
    
    var body: some View {
//        ScrollView {
            TabView(selection: .constant(0), content:  {
                Color.orange.height(500)
            })
            .tabViewStyle(.page(indexDisplayMode: .always))
//        }
    }
}

如何解决这个问题？我不想给 TabView 固定的高度，我希望它假设其内容的高度。

这个类似问题的公认答案说“当您在滚动视图内的对象上设置无限高度时，它只占用内容真正需要的空间。”在这里，内容明确需要 500 的高度，但这仍然没有得到尊重。

Answer 1

我以前遇到过这个问题，我有一个简单的解决方案。您可以使用

ZStack

，如下所示：

struct TabViewProblems: View {
    var body: some View {
        ScrollView {
            ZStack {
                Color.orange.height(500).hidden()
                TabView(selection: .constant(0), content: {
                    Color.orange.height(500)
                })
                .tabViewStyle(.page(indexDisplayMode: .always))
            }
        }
    }
}