swift - 你如何垂直居中 SwiftUI tabItem

Question

我使用 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)
        }
    }
}

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

Answer 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"))
        }
    }
}