SwiftUI 开发中 TabBarItems 横向不对齐问题如何解决？

问题产生原因 #

• 该问题是iOS/iPadOS 15及以上系统对TabView的默认适配逻辑导致：竖屏状态下，系统默认将TabBarItem设置为「图标在上、文字在下」的垂直布局，所有Item自动等宽排列，因此可以对齐；横屏状态下系统自动切换为「图标在左、文字在右」的水平布局，Item宽度会根据文字长度自适应，不同Item的文字长度不一致就会出现无法水平对齐的问题。
• 你当前的代码未指定TabBar的排列规则，系统走默认自适应逻辑，因此出现横竖屏布局不一致、Item不对齐的问题。

可行修复方案 #

方案1：强制全局采用垂直布局（改动最小，推荐） #

给TabView添加toolbarRole修饰符，指定为.navigation，强制系统无论横竖屏都采用垂直排列的TabBarItem，和竖屏布局保持一致：

struct MainView: View {
    @Environment(\.managedObjectContext) var moc

    var body: some View {
        TabView {
            CodesView()
                .environment(\.managedObjectContext, moc)
                .tabItem {
                    Label("Codes", systemImage: "list.dash")
                }
            
            SettingsView()
                .tabItem {
                    Label("Settings", systemImage: "gearshape.fill")
                }
        }
        .toolbarRole(.navigation) // 新增该行代码
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

方案2：自定义TabBarItem强制等宽 #

如果需要保留横屏的水平图文布局，可以自定义TabBarItem样式，统一所有Item的宽度：

// 先封装通用自定义TabItem组件
struct CustomTabItem: View {
    let title: String
    let systemImage: String
    private let itemWidth: CGFloat = 80 // 可根据需求调整统一宽度
    
    var body: some View {
        VStack(spacing: 4) {
            Image(systemName: systemImage)
            Text(title)
                .font(.caption)
        }
        .frame(width: itemWidth)
    }
}

// 替换原来的tabItem内容
.tabItem {
    CustomTabItem(title: "Codes", systemImage: "list.dash")
}

方案3：全局修改UITabBar外观规则 #

如果需要全局生效所有TabBar的对齐规则，可以在App启动时配置UIKit的TabBar外观：

// 在App主入口的init方法中添加即可
@main
struct YourApp: App {
    init() {
        let appearance = UITabBarAppearance()
        appearance.stackedItemPositioning = .centered // 强制居中等分布局
        appearance.stackedItemWidth = 80 // 可统一设置Item宽度
        UITabBar.appearance().standardAppearance = appearance
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
    }
    
    var body: some Scene {
        WindowGroup {
            MainView()
        }
    }
}

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