你如何垂直居中 SwiftUI tabItem答案

【问题标题】：How do you vertically center a SwiftUI tabItem你如何垂直居中 SwiftUI tabItem
【发布时间】：2020-01-05 20:52:14
【问题描述】：

我使用 SwiftUI 创建了一个 TabView。我试图让 TabBar 中的 TabItems 垂直居中。但是，它们没有正确居中。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView(selection: .constant(0)) {
            RouteList()
                .tabItem {
                    Image("subway-3")
                    Text("Trains")
                }.tag(0)

            VStack {
                Text("Tab 2")
            }
            .tabItem {
                Image("subway-3")
                Text("Lines")
            }.tag(1)

            VStack {
                Text("Tab 3")
            }
            .tabItem {
                Image(systemName: "star")
                Text("Slow Zones")
            }.tag(2)
        }
    }
}

在这里你可以看到这段代码的结果。

【问题讨论】：

标签： swift swiftui tabview tabitem

【解决方案1】：

您将无法将标签栏项目垂直居中，因为它们最终会超出安全区域。底部的空白区域是保存区底部边缘和屏幕底部边缘之间的区域。您可以比较新款 iPhone 上的外观与它在保存区域一直延伸到屏幕边缘的旧款 iPhone 上的表现：

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(stringLiteral: "iPhone 8"))
            ContentView()
                .previewDevice(PreviewDevice(stringLiteral: "iPhone XR"))
        }
    }
}

【讨论】：