ios - 基于内容的具有 PageTabViewStyle 动态高度的 SwiftUI TabView

Question

如何制作我的 SwiftUI TabView与 PageTabViewStyle将其高度调整为内容的高度？
我有一个 SwiftUI View 如下:

struct TabViewDynamicHeight: View {
    var body: some View {
        VStack {
            TabView {
                ForEach(0..<5, id: \.self) { index in
                    VStack {
                        Text("Text \(index)")
                        Text("Text \(index)")
                        Text("Text \(index)")
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .background(Color.red)
            .fixedSize(horizontal: false, vertical: true)
        }
        .background(Color.blue)
    }
}

这会产生如下输出:

可以看到， TabView 的内容被切断。我知道，我可以删除 .fixedSize ，但 View 看起来像这样:

我希望 TabView 响应内容的高度。关于如何实现这一目标的任何想法？

Answer 1

一种可能的方法是在运行时动态获取内容矩形并通过 View 首选项传输到父级，因此父级可以将其设置为框架以适应内容。
使用 Xcode 13.3/iOS 15.4 测试

这是主要部分:

VStack {
    Text("Text \(index)")
    Text("Text \(index)")
    Text("Text \(index)")
}
.frame(maxWidth: .infinity)
.background(GeometryReader {
    Color.clear.preference(key: ViewRectKey.self,
                                  value: [$0.frame(in: .local)])
})

// ...

.frame(height: rect.size.height
         + 60 /* just to avoid page indicator overlap */)
.onPreferenceChange(ViewRectKey.self) { rects in
    self.rect = rects.first ?? .zero
}

Complete test code in project is here