你如何垂直居中 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

您将无法将标签栏项目垂直居中，因为它们最终会位于安全区域之外。底部空白的space是保存区域下边缘和屏幕下边缘之间的区域。您可以比较带有缺口的较新 iPhone 的外观与保存区域一直延伸到屏幕边缘的较旧 iPhone 的外观：

struct ContentView_Previews: PreviewProvider {

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

你如何垂直居中 SwiftUI tabItem

How do you vertically center a SwiftUI tabItem

tabitem

tabview

swift

swiftui