简体   繁体   English

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

[英]Set dynamic height for TabView in SwiftUI for Custom Views

Been trying to figure out how I can dynamically adjust the height of the TabView based on the content.一直试图弄清楚如何根据内容动态调整 TabView 的高度。

Here is my code:这是我的代码:

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

Due to legal reasons I can't share the screenshot here.由于法律原因,我无法在此处分享屏幕截图。 But any help will be highly appreciated.但任何帮助将不胜感激。 Please let me know if you need any code or anything.如果您需要任何代码或任何东西,请告诉我。

I tried getting the height of the custom views by setting a Geometry Reader there but it only returns the height of TabView and not the custom View.我尝试通过在那里设置 Geometry Reader 来获取自定义视图的高度,但它只返回 TabView 的高度而不是自定义视图。

UPDATE For the custom views I have do not have a fixed height, the height of the custom views depends on the data I get from the API.更新对于我没有固定高度的自定义视图,自定义视图的高度取决于我从 API 获得的数据。

GeometryReader is for detecting the size of available space from the parent. GeometryReader用于从父级检测可用空间的大小。

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

You have to tell TabView some other way what size the TabView should give the child.您必须以其他方式告诉TabView TabView应该给孩子多大的尺寸。 Not the other way around.不是反过来。

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()
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM