如何动态收紧 TabView 的高度？

Question

TabView 似乎伸展到了它的最大高度，但我希望它尽可能地缩短到它需要的高度，而不是空白处。即使周围有 Spacer 个视图，它看起来也是这样：

struct ContentView: View {
    var body: some View {
        Text("Some text")
        Text("Some text")
        Text("Some text")
        Spacer()
        TabView {
            GroupBox(label: Text("This is the title 1")) {
                Label("Some item 1", systemImage: "checkmark.circle.fill")
                Label("Some item 2", systemImage: "checkmark.circle.fill")
                Label("Some item 3", systemImage: "checkmark.circle.fill")
                Label("Some item 4", systemImage: "checkmark.circle.fill")
            }
            .padding()
            GroupBox(label: Text("This is the title 2")) {
                Label("Some item 1", systemImage: "checkmark.circle.fill")
                Label("Some item 2", systemImage: "checkmark.circle.fill")
                Label("Some item 3", systemImage: "checkmark.circle.fill")
                Label("Some item 4", systemImage: "checkmark.circle.fill")
            }
            .padding()
            GroupBox(label: Text("This is the title 3")) {
                Label("Some item 1", systemImage: "checkmark.circle.fill")
                Label("Some item 2", systemImage: "checkmark.circle.fill")
                Label("Some item 3", systemImage: "checkmark.circle.fill")
                Label("Some item 4", systemImage: "checkmark.circle.fill")
            }
            .padding()
        }
        .tabViewStyle(PageTabViewStyle())
        .background(Color.yellow)
        Spacer()
        Text("Some text")
        Text("Some text")
        Text("Some text")
    }
}

有没有办法动态地将高度收紧到孩子们需要的高度？

Answer 1

使用.frame( height: .leastNormalMagnitude)

.tabViewStyle(PageTabViewStyle())
.background(Color.yellow)
.frame( height: .leastNormalMagnitude)

---

页面索引涵盖了视图。您可能需要给 GroupBoxes 一个 40-50 点的填充底部或更改 indexViewStyle 的背景。

 .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))