iPad 与 iPhone 上的 SwiftUI TabItem 格式？

Question

我有一个 iPhone 应用程序，我已将其配置为也可以在 iPad 上运行。它在 iPhone 和 iPad 上都运行良好，除了 TabView“选项卡”项目在 iPad 和 iPhone 上的呈现方式不同之外。我想让 iPad 选项卡看起来与 iPhone 上的一样，但我似乎不知道该怎么做！任何帮助将不胜感激..！

使用 Xcode 14.3.1

目标操作系统：iOS 16.2

Xcode 上的部署信息：

我的 TabView 代码如下所示：

struct ContentView: View {
    
    @EnvironmentObject var BLEinfo: BLEdata
    
    // let timer = Timer.publish (every: 0.8, on: .current, in: .common).autoconnect()
    
    var body: some View {
        
        HStack {
            if UIDevice().model == "iPad" && !self.BLEinfo.iPadWiderView {
                Spacer().background(.black)
            }
            TabView(selection: self.$BLEinfo.tabSelected) {
                
                VStack(spacing: 0) {
                    configTabView()
                }
                .tabItem {
                    VStack(spacing: 0) {
                        Image(systemName: "rectangle.compress.vertical")
                            .font(Font.system(.title ))
                        Text("Config. Meter")
                    }
                } .tag(0)
                
                VStack(spacing: 0) {
                    settingsTabView()
                    statusLineView()
                }
                .tabItem {
                    VStack(spacing: 0) {
                        Image(systemName: "gear.badge.questionmark")
                            .font(Font.system(.title ))
                        Text("Settings & About")
                    }
                } .tag(1)
                
                VStack(spacing: 0) {
                    connectTabView()
                    statusLineView()
                    // Spacer()
                }
                .tabItem {
                    VStack(spacing: 0) {
                        Image(systemName: "dot.radiowaves.left.and.right" )
                            .font(Font.system(.title ))
                        Text("Connect Meter")
                    }
                } .tag(2)
                
                VStack(spacing: 0) {
                    readMeterTabView()
                    statusLineView()
                }
                .tabItem {
                    // Label("Read Meter", systemImage: "speedometer")
                    VStack(spacing: 0) {
                        Image(systemName: "speedometer")
                            .font(Font.system(.title ))
                        Text("Read Meter")
                    }
                } .tag(3)
            }.font(.system(size: CGFloat(self.BLEinfo.nonDynamicUIfontSize)))
                .accentColor(.gray)
        }.background(Color.init(red: 30/255, green: 30/255, blue: 30/255))
    }
}

在 iPhone 上，它的渲染效果如下（iPhone（纵向）屏幕下半部分的屏幕截图：

在 iPad 上，它的渲染效果如下（iPad（纵向）屏幕下半部分的屏幕截图：

请注意 TabItems 的 iPad 渲染基本上如何忽略每个 TabItem 的“VStack”（因此它将整个 tabItem 区域渲染为“HStack”。

如何在 iPad 上获得相同的“外观”？换句话说，TabItem 的“文本”需要放置在 TabItem 的“图像”下方？

编辑： 我已经尝试从每个“tabItem”中删除“VStack”。这在 iPhone 和 iPad 上没有区别。

还尝试对选项卡项使用更短/更新的“标签”格式，因此使用：

Label("Read Meter", systemImage: "speedometer")

对任何设备都没有影响！

谢谢！

Answer 1

根据这篇文章（除了 UIKit 之外，这是同样的问题），一种方法是将水平尺寸类覆盖为

.compact

。我不确定这是否能保证在未来的版本中起作用，因为水平显示的选项卡项是设计使然的（请参阅这个特定答案）。您可能想创建自己的标签栏。

您可以通过修改

TabView

来覆盖 SwiftUI 中的尺寸类：

.environment(\.horizontalSizeClass, .compact)

请注意，如果每个选项卡中的视图取决于水平尺寸类别，这也会影响它们。为了避免这种情况，请使用

@Environment

获取尺码类别，并将其传递到选项卡。

这是一个粗略的草图：

@Environment(\.horizontalSizeClass) var oldSizeClass

var body: some View {
    TabView {
        SomeView()
            .tabItem {
                Label(...)
            }
            .environment(\.horizontalSizeClass, oldSizeClass)
        
        AnotherView()
            .tabItem {
                Label(...)
            }
            .environment(\.horizontalSizeClass, oldSizeClass)
    }.environment(\.horizontalSizeClass, .compact)
}