在 SwiftUI 中为自定义视图设置 TabView 的动态高度

Question

一直在试图弄清楚如何根据内容动态调整 TabView 的高度。

这是我的代码：

TabView(selection: $selectedTab){
                
                
                CustomViewOne()
                    .tag(TabHeaderView.Tab.ViewOne)
                
                
                CustomViewTwo()
                    .tag(TabHeaderView.Tab.ViewTwo)
                
                
                CustomViewThree()
                    .tag(TabHeaderView.Tab.ViewThree)
                
            }
            
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .animation(.easeInOut)

由于法律原因，我无法在此处分享屏幕截图。但任何帮助将不胜感激。如果您需要任何代码或任何东西，请告诉我。

我尝试通过在此处设置几何阅读器来获取自定义视图的高度，但它只返回 TabView 的高度而不是自定义视图。

更新 对于我没有固定高度的自定义视图，自定义视图的高度取决于我从 API 获得的数据。

Answer 1

GeometryReader 用于检测父级可用空间的大小。

https://developer.apple.com/documentation/swiftui/geometryreader

您必须以其他方式告诉TabView TabView 应该给孩子多大的尺寸。反之亦然。

import SwiftUI
struct ViewProperties: Hashable, Identifiable{
    var id = UUID()
    var height: CGFloat
    var width: CGFloat
}
struct ViewProperties: Hashable, Identifiable{
    var id = UUID()
    var height: CGFloat
    var width: CGFloat
}
struct FlexibleTabView: View {
    @State var selection: ViewProperties?
    @State var views: [ViewProperties] = [ViewProperties(height: 100, width: 100), ViewProperties(height: 150, width: 150), ViewProperties(height: 200, width: 200), ViewProperties(height: 250, width: 250)]
    var body: some View {
        NavigationView{
            TabView(selection: $selection, content: {
                ForEach($views, id:\.id, content: { $view in
                    Rectangle()
                        .border(Color.blue)
                        .foregroundColor(Color.clear)
                        .overlay(
                            VStack{
                            Text(view.height.description)
                            //Change the size of the TabView from within the ChildView
                            Button("change size", action: {
                                view.height = CGFloat(Int.random(in: 100...250))
                                view.width = view.height
                                //Altering the selection seems to be the only way that a TabView redraws
                                selection = view
                            })
                        }
                        ).tag(view as? ViewProperties)
                })
            }).navigationTitle(selection?.height.description ?? "")
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                .animation(.easeInOut)
                .onAppear(){
                    selection = views.first!
                }
            
                .frame(width: selection?.height ?? .zero, height: selection?.width ?? .zero, alignment: .center)
        }
        
    }
}
struct FlexibleTabView_Previews: PreviewProvider {
    static var previews: some View {
        FlexibleTabView()
    }
}