SwiftUI TabView本地化后标签文本过长无法换行，如何解决？

使用SwiftUI的TabView时，英文标签显示正常，但西班牙语本地化后标题文本过长出现重叠，无法自动换行。需求是让tabItem中的文本实现换行，且不想自定义TabBar（偏好使用.toolbar(.hidden, for: .tabBar)一行代码隐藏原生工具栏）。已尝试增加文本行限制、调整文本可用空间，均无效果。

相关代码 #

struct ContentView: View {
    @State private var selectedTab: Tab = .home
    @EnvironmentObject var session: SessionManager
    
    var body: some View {
        TabView(selection: $selectedTab) {
            let availableTabs = getTabsForRole()
            ForEach(availableTabs, id: \.self) { tab in
                Group {
                    switch tab {
                    case .home:
                        Home(selectedTab: $selectedTab)
                    case .harvestStats:
                        HarvestStats()
                    case .packPlan:
                        PackPlan(selectedTab: $selectedTab)
                    case .searchForm:
                        SearchForm()
                    case .harvestRelease:
                        SearchForm()
                    }
                }
                .tabItem {
                    Image(tab.iconName)
                        .renderingMode(.template)
                        .foregroundColor(selectedTab == tab ? .accent : Constants.ThemeDark)
                    Text(LocalizedStringKey(tab.displayName))
                        .multilineTextAlignment(.center)
                        .lineLimit(3)
                        .fixedSize(horizontal: false, vertical: true)
                        .frame(maxWidth: .infinity)
                }
                .tag(tab)
            }
        }
        .environment(\.locale, .init(identifier: "en"))
        .onAppear {
            initNavAppearance()
        }
    }
    
    private func initNavAppearance() -> Void {
        // tab bar text
        UITabBar.appearance().unselectedItemTintColor = UIColor(Constants.ThemeDark)
        UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont(name: "Gotham", size: 12)!], for: .normal)
        UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont(name: "Gotham", size: 12)!], for: .selected)
        
        // back icon
        UIBarButtonItem.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).tintColor = .black
        UINavigationBar.appearance().backIndicatorImage = UIImage(named: "backIcon")?.withRenderingMode(.alwaysTemplate)
        UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backIcon")?.withRenderingMode(.alwaysTemplate)
        
        // toolbar font
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.font: UIFont(name: "Gotham", size: 24) as Any]

        //back button
        UIBarButtonItem.appearance().setTitleTextAttributes([.foregroundColor: UIColor.clear], for: .normal)
        UIBarButtonItem.appearance().setTitleTextAttributes([.foregroundColor: UIColor.clear], for: .highlighted)
    }
}

效果对比 #

英文状态下的TabView #

西班牙语状态下的TabView #

解决方法 #

原生SwiftUI的tabItem对多行文本支持有限，需结合UIKit配置实现换行：

1. 强制设置文本换行模式
   在initNavAppearance方法中，给UITabBarItem添加段落样式，指定按单词换行：

UITabBarItem.appearance().setTitleTextAttributes([
    .font: UIFont(name: "Gotham", size: 12)!,
    .paragraphStyle: {
        let style = NSMutableParagraphStyle()
        style.lineBreakMode = .byWordWrapping
        style.alignment = .center
        return style
    }()
], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([
    .font: UIFont(name: "Gotham", size: 12)!,
    .paragraphStyle: {
        let style = NSMutableParagraphStyle()
        style.lineBreakMode = .byWordWrapping
        style.alignment = .center
        return style
    }()
], for: .selected)

2. 优化布局适配
   如果仍有重叠，可适当缩小字体或调整标题垂直偏移，给多行文本留出空间：

// 可选：缩小字体
UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont(name: "Gotham", size: 10)!], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont(name: "Gotham", size: 10)!], for: .selected)

// 调整标题垂直位置
UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -2)

3. 优化SwiftUI侧Text配置
   保留Text的多行设置，确保对齐和换行逻辑生效：

Text(LocalizedStringKey(tab.displayName))
    .multilineTextAlignment(.center)
    .lineLimit(2) // 限制为2行更贴合TabBar高度
    .allowsTightening(true)
    .fixedSize(horizontal: false, vertical: true)

原理说明 #

SwiftUI的tabItem底层基于UIKit的UITabBarItem，仅通过SwiftUI侧设置Text属性无法强制换行，必须通过UIKit的NSParagraphStyle指定换行规则，同时调整TabBarItem的布局参数，才能让多行文本正常显示。

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