如何在SwiftUI中计算标签栏高度?

问题描述 投票:0回答:1

我的播放器页面的高度是屏幕高度的1/3。在通道下,滚动视图中有多个通道。我试图将滚动视图部分的高度从播放器底部精确设置到页面底部。我试图将其设置为(屏幕高度-(玩家高度)-(导航栏高度)-(标签栏高度))。但是问题在于,标签栏的高度在设备之间会发生变化。我尝试了以下代码:

.frame(height: (UIScreen.main.bounds.height) - ((UIScreen.main.bounds.height) * 2/6) - (geometry.safeAreaInsets.top + geometry.safeAreaInsets.bottom ) )

但是看起来geometry.safeAreaInsets.bottom不包含选项卡式栏的高度。因此,有什么方法可以在SwiftUI中进行计算,还是有其他方法可以实现类似的外观?

我只想放置包含所有屏幕尺寸的播放器和标签栏之间的通道的滚动视图。

sample design

ios xcode swiftui
1个回答
0
投票

[我只是开始研究SwiftUI,但是……我对GeometryReader应该为您解决这个问题感到印象深刻。

尝试一下:

struct Tab1View: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Top == 1/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height / 3.0, alignment: .center)
                    .background(Color.init(red: 0.1, green: 0.1, blue: 0.5))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
                Text("Bottom == 2/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 2.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.5, green: 0.1, blue: 0.1))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
            }
            .frame(width: geometry.size.width,
                   height: geometry.size.height,
                   alignment: .topLeading)
        }
    }

}
struct Tab2View: View {
    var body: some View {
        Color.blue
    }
}

struct MyTabView: View {
    var body: some View {

        TabView {
            //Text("The content of the first view")
            Tab1View()
                .tabItem {
                    Image(systemName: "phone.fill")
                    Text("First Tab")
            }
            //Text("The content of the second view")
            Tab2View()
                .tabItem {
                    Image(systemName: "tv.fill")
                    Text("Second Tab")
            }
        }
    }
}

struct MyTabView_Previews: PreviewProvider {
    static var previews: some View {
        MyTabView()
    }
}

结果:

enter image description here

并且旋转时自动调整为TabBar的高度:

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.