iPad 与 iPhone 上的 SwiftUI TabItem 格式？-解网

问：

我有一个 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 的“Text”需要放在 TabItem 的“图像”下方吗？

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

还尝试对 tabItems 使用较短/较新的“标签”格式，因此使用：

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

对任何一台设备都没有影响！

谢谢！

iPhone SwiftUI iPad 标签渲染

@Environment(\.horizontalSizeClass) var oldSizeClass

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

iPad 与 iPhone 上的 SwiftUI TabItem 格式？

SwiftUI TabItem format on iPad vs iPhone?

评论

评论