[英]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.