如何动态收紧 TabView 的高度？

Posted 2023-02-24

【中文标题】如何动态收紧 TabView 的高度？

【英文标题】：How to dynamically tighten height for TabView?

【发布时间】：2021-03-06 18:15:40

【问题描述】：

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")
    

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

【问题讨论】：

我的回答解决了问题吗？

它导致了奇怪的布局问题，可能与我的特定应用程序更相关。但确实让我更接近.. 谢谢！

【参考方案1】：

使用.frame( height: .leastNormalMagnitude)

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

---

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

 .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))