SwiftUI：如何让TabView中的tabItem实现垂直居中？

在TabView中添加了5个tabItem，其中中间的是Image视图，其余为Text视图，但它们无法垂直居中，Image视图悬浮在TabView上方。将Text视图替换为设置了systemImage属性的Label视图后，Label中的图片能与该Image视图对齐，请问是否有方法让tabItem中的普通视图实现垂直居中？

用户提供的代码：

struct ContentView: View {

    var body: some View {
        TabView {
            Text("")
                .tabItem {
                    Text("One")
                }
            Text("")
                .tabItem {
                    Text("Two")
                }
            Text("")
                .tabItem {
                    Image(systemName: "plus.app")
                }
            Text("")
                .tabItem {
                    Text("Three")
                }
            Text("")
                .tabItem {
                    Text("Four")
                }
        }
        .onAppear {
            let tabBarItemAppearence = UITabBarItemAppearance()

            let tabBarAppearance = UITabBarAppearance()
            tabBarAppearance.shadowColor = UIColor(.gray)
            tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearence

            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
        }
    }
}

#Preview {
    ContentView()
}

方法1：给单独的Image添加垂直偏移 #

直接调整中间Image的垂直位置，让它和Text视图对齐：

.tabItem {
    Image(systemName: "plus.app")
        .offset(y: 6) // 可根据实际显示效果微调数值
}

方法2：统一使用Label组件（隐藏冗余元素） #

为了保证所有tabItem布局规则一致，全部用Label包裹，通过labelStyle控制显示内容：

TabView {
    Text("")
        .tabItem {
            Label("One", systemImage: "")
                .labelStyle(.titleOnly) // 只显示文字
        }
    Text("")
        .tabItem {
            Label("Two", systemImage: "")
                .labelStyle(.titleOnly)
        }
    Text("")
        .tabItem {
            Label("", systemImage: "plus.app")
                .labelStyle(.iconOnly) // 只显示图标
        }
    Text("")
        .tabItem {
            Label("Three", systemImage: "")
                .labelStyle(.titleOnly)
        }
    Text("")
        .tabItem {
            Label("Four", systemImage: "")
                .labelStyle(.titleOnly)
        }
}
// 原有onAppear代码不变

这种方式会让所有元素自动遵循Label的默认垂直居中布局，避免出现错位。

方法3：通过UITabBarItemAppearance统一调整布局参数 #

修改UITabBarItemAppearance的偏移属性，统一所有tabItem的图标和文字位置：

.onAppear {
    let tabBarItemAppearance = UITabBarItemAppearance()
    // 调整图标的垂直偏移，让图标向下移动对齐文字
    tabBarItemAppearance.normal.iconOffset = CGPoint(x: 0, y: 6)
    // 如果需要调整文字位置，可取消下面注释
    // tabBarItemAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -6)
    
    let tabBarAppearance = UITabBarAppearance()
    tabBarAppearance.shadowColor = UIColor(.gray)
    tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearance
    
    // 同时设置standardAppearance和scrollEdgeAppearance，确保所有状态生效
    UITabBar.appearance().standardAppearance = tabBarAppearance
    UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}

内容的提问来源于stack exchange，提问作者neil lee