带有列表的 SwiftUI 自定义导航栏

Posted 2023-02-24

【中文标题】带有列表的 SwiftUI 自定义导航栏

【英文标题】：SwiftUI Custom navigation bar with list

【发布时间】：2019-08-03 13:31:41

【问题描述】：

我做了一个类似于下面看到的苹果的列表，但我真的不喜欢 UInavigation 栏的样子。理想情况下，我希望它更小或隐藏起来，以便我可以将自己的视图放在那里。

我试图通过使用苹果外观 api 中的以下内容来隐藏它

init()  
    UINavigationBar.appearance().backgroundColor = .green
    UINavigationBar.appearance().isHidden = true
   

与拥有巨大的标题相比，即使拥有这样的导航栏也会更理想

但这没有影响，有没有人有任何建议或想法，我可以如何自定义它以使其更符合我的需要？

【参考方案1】：

这是我使用 swiftUI 和一些 UINavigationView 实现的，我相信这些修饰符将在 beta 后实现到 swiftUI。

我通过调整 max 关于 UINavigationBar 外观的想法来实现这一点。 How can the background or the color in the navigation bar be changed?

除此之外，我只是切换到 NavigationBar 标题的视图

var body: some View 
    VStack 
        if displayImg 
            Image("dontstarve")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
         else 
            Image(systemName: "play")
        
    
        .navigationBarTitle(Text("Adjustment"), displayMode: .inline)
        .navigationBarItems(trailing:
            HStack 
                Toggle(isOn: $displayImg) 
                    Text("\(self.displayImg ? "on" : "off")")
                        .foregroundColor(Color.white)
                
    )

以下是唯一不是 SwiftUI 的代码。我只是把它们都扔到 init() 中：

init() 
    UINavigationBar.appearance().tintColor = .systemGray6
    UINavigationBar.appearance().barTintColor = .systemTeal
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white, NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 25)]

是的，记得将导航栏标题模式设置为内联：

    .navigationBarTitle(Text("Home"), displayMode: .inline)

【讨论】：

.inline 在当前的 xcode beta 中是否有可能被破坏？

我正在运行 beta 5，似乎 .inline 对我来说工作正常。虽然我确实发现 beta 5 并不那么稳定，而且几乎没有什么问题。您能否更好地解释一下 .inline 是如何为您破坏的？ .navigationBarTitle 应该放在导航视图内，而不是放在外面。例如： NavigationView Text("Hi") .navigationBarTitle(Text("Home"), displayMode: .inline)

是的，这有帮助！只需要将导航标题样式类型更改为 .inline。

【参考方案2】：

你可以做这样的事情，让它像以前的 ios 13 导航栏一样，然后删除大标题并将它一直放在中间的栏上：

 .navigationBarTitle(Text("Landmark"), displayMode: .inline)