如何在 SwiftUI 中缩小导航标题？答案

【问题标题】：How do I scale down a navigationTitle in SwiftUI?如何在 SwiftUI 中缩小导航标题？
【发布时间】：2021-06-05 19:27:48
【问题描述】：

我遇到了与navigationtitle too long in swiftui 中所述相同的问题——我想缩小导航栏标题以适应可用空间。问题来了：

这是我的代码，其中包含在对另一个引用问题的答案中提出的建议：

struct AboutView: View {
    @Binding var showAboutView: Bool
    
    var body: some View {
        NavigationView {
            Form {
                Section() {
                    Text("A placeholder for information about this app.\n\nDetails forthcoming....")
                }
                
                if let url = URL(string: "mailto:sarjo@sarjosoftware.com?subject=My+Wonderful+App") {
                    Section() {
                        Link("Contact the Author", destination: url)
                    }
                }
            }
            // *** suggested solution ***
            .navigationTitle(Text("About My Wonderful App").minimumScaleFactor(0.5).lineLimit(1))
            .navigationBarItems(trailing: Button(action: {
                showAboutView = false
            }) {
                Text("Done").bold()
            })
        }
    }
}

但此代码无法构建并出现以下错误： Instance method 'navigationTitle' requires that 'some View' conform to 'StringProtocol'在线Form {。如果我将标题文本上的修饰符移到外面以应用于navigationTitle 修饰符本身，如下所示：

.navigationTitle(Text("About My Wonderful App")).minimumScaleFactor(0.5).lineLimit(1)

此代码构建并运行，但修饰符未应用于标题文本，而是应用于以 "A placeholder for 开头的正文文本：

感谢您的任何建议。

【问题讨论】：

标签： ios swiftui uinavigationbar

【解决方案1】：

您可以尝试.toolbar，尤其是因为.navigationBarItems已被弃用

struct AboutView: View {
    @Binding var showAboutView: Bool
    
    var body: some View {
        NavigationView {
            Form {
                Section() {
                    Text("A placeholder for information about this app.\n\nDetails forthcoming....")
                }
                
                if let url = URL(string: "mailto:sarjo@sarjosoftware.com?subject=My+Wonderful+App") {
                    Section() {
                        Link("Contact the Author", destination: url)
                    }
                }
            }
            .toolbar(content: {
                ToolbarItem(placement: .principal, content: {
                    Text("About My Wonderful App")
                        .font(.title2).fontWeight(.bold)
                })
                
                ToolbarItem(placement: .navigationBarTrailing, content: {
                    Button(action: {showAboutView = false}) {
                        Text("Done").bold()
                    }
                })
            })
        }
    }
}

【讨论】：

这是我需要的部分。问题是“完成”按钮与标题字符串（“About ...”）出现在同一行。我更喜欢它在标题字符串上方，就像在原始屏幕截图中一样，但我看不到使用 .placement 的方法。
没有placement 就像.inline 可能是星期一

【解决方案2】：

我读到了你的问题。我的建议是减小 NavigationTitle 的 字体大小 您可以通过此代码减少 NavigationTitle：

  init() {
    // this is not the same as manipulating the proxy directly
    let appearance = UINavigationBarAppearance()
    
    // this overrides everything you have set up earlier.
    appearance.configureWithTransparentBackground()
    
    // this only applies to big titles
    appearance.largeTitleTextAttributes = [
        .font : UIFont.systemFont(ofSize: 30),
        NSAttributedString.Key.foregroundColor : UIColor.black
    ]
    // this only applies to small titles
    appearance.titleTextAttributes = [
        .font : UIFont.systemFont(ofSize: 20),
        NSAttributedString.Key.foregroundColor : UIColor.black
    ]
    
    //In the following two lines you make sure that you apply the style for good
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
    UINavigationBar.appearance().standardAppearance = appearance
    
    // This property is not present on the UINavigationBarAppearance
    // object for some reason and you have to leave it til the end
    UINavigationBar.appearance().tintColor = .black
    
}

您应该将此代码添加到正文上方。

另外，我附上了两个链接来帮助您摆脱 NavigationTitle。我希望这些对你有用。

Apple hackingwithswift

【讨论】：