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

阿格拉

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

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

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

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

样本设计

唐马格

我只是开始研究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()
    }
}

结果:

在此处输入图片说明

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

在此处输入图片说明


编辑

经过更多调查后,看起来ScrollView可以调整大小以填充可用空间,因此我们只需要在顶视图上设置高度即可。

这是修改后的示例:

struct MyItemView: View {
    var itemDesc = "Testing"
    var geoWidth: CGFloat = 100
    var body: some View {
            Text("\(self.itemDesc)")
                .foregroundColor(Color.white)
                .padding(16.0)
                .frame(width: self.geoWidth, height: nil, alignment: .leading)
    }
}

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

                ScrollView(.vertical) {
                    VStack(alignment: .leading, spacing: 0) {
                        ForEach((1...20), id: \.self) {
                            MyItemView(itemDesc: "This is item \($0)", geoWidth: geometry.size.width)
                                .background(Color.init(red: 0.5, green: 0.1, blue: 0.1))
                                .border(Color.yellow)
                        }
                    }
                }
                .frame(width: geometry.size.width, height: nil, alignment: .leading)
            }
        }
    }
}
struct Tab2View: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Top == 1/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 1.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.1, green: 0.1, blue: 0.7))
                    .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.2, green: 0.6, blue: 0.1))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
            }
        }
    }
}
struct MyTabView: View {
    var body: some View {
        TabView {
            Tab1View()
                .tabItem {
                    Image(systemName: "phone.fill")
                    Text("First Tab")
            }
            Tab2View()
                .tabItem {
                    Image(systemName: "tv.fill")
                    Text("Second Tab")
            }
        }
    }
}

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

并且,新结果:

在此处输入图片说明

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在SwiftUI中计算@ViewBuilder视图?

来自分类Dev

如何在静态控件中计算文本的实际高度

来自分类Dev

如何在React Native中计算()高度以进行样式

来自分类Dev

如何在iOS中计算Web视图内容的高度?

来自分类Dev

如何在适用于Web应用的移动Safari中计算可见区域的高度(即,窗口高度减去地址和书签栏)?

来自分类Dev

如何在SwiftUI中计算CustomView中的目录数?

来自分类Dev

如何在pyspark中计算?

来自分类Dev

如何在多标签分类中计算F1测度?

来自分类Dev

如何在多标签分类中计算F1测度?

来自分类Dev

如何在表格视图中计算值并显示在单独的标签中

来自分类Dev

如何找出 QTabWidget 中标签栏的高度?

来自分类Dev

SwiftUI如何在不切换标签栏的情况下刷新单个标签视图

来自分类Dev

如何在Hive中计算中位数

来自分类Dev

如何在SQL中计算“运行总计”

来自分类Dev

如何在RX中计算处理时间

来自分类Dev

如何在PostgreSQL中计算最大列

来自分类Dev

如何在mysql中计算复合主键

来自分类Dev

如何在Excel中计算元素

来自分类Dev

如何在mySQL表中计算票数?

来自分类Dev

如何在AngularJS中计算地图大小

来自分类Dev

如何在蜂巢中计算累计薪水

来自分类Dev

如何在Matlab中计算每页STD?

来自分类Dev

如何在Excel中计算总和

来自分类Dev

如何在Slick 2.0中计算(*)?

来自分类Dev

如何在Firebase中计算连接

来自分类Dev

如何在bash中计算arccos()?

来自分类Dev

如何在mysql中计算权重

来自分类Dev

如何在Django模板中计算时差

来自分类Dev

如何在Netlogo中计算死海龟