在SwiftUI中向导航栏添加子视图

9rygscc1 于 2023-09-30 发布在 Swift

关注(0)|答案(2)|浏览(135)

我注意到，第一方苹果应用程序和一些第三方应用程序都能够在标题下方的导航栏内嵌套搜索过滤芯片。我正试图弄清楚一个人将如何实现这一目标。
我尝试使用.toolbar修饰符来实现这一点，但这并没有达到预期的结果。
将感谢任何人的输入如何可以实现导航栏布局在屏幕截图使用SwiftUI。也就是说，一个原生的外观/感觉导航栏，带有搜索，大标题，小标题和标签/芯片/过滤器，与GitHub截图完全相同。

Github导航折叠

GitHub扩展导航

GitHub搜索导航

AppStore相似布局

滚动行为w/Chips/Tags（我想实现的目标）

swift

来源：https://stackoverflow.com/questions/77065763/adding-subviews-to-navigation-bar-in-swiftui

2条答案

按热度按时间

ig9co6j11#

我不认为你的样本是附加到导航栏。苹果在2010年推出了PinnedScrollableViews

@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)

这些包含在某些视图中，如LazyVStack
可以将页眉或页脚设置为固定的视图。

import SwiftUI

struct StickyNavigationBar: View {
    init() {
        //Hide the shadow from the navigation bar
        let appearance = UINavigationBarAppearance()
        appearance.shadowColor = .clear
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(pinnedViews: [.sectionHeaders]) { //Set the pinned view
                    Section {
                        ForEach(0..<7) { n in
                            Button {
                                
                            } label: {
                                Text("sample \(n)")
                            }
                            
                        }
                    } header: {
                        //make this whatever you want

                        ScrollView(.horizontal) {
                            HStack {
                                ForEach(0..<7) { n in
                                    Button {
                                        
                                    } label: {
                                        Text("sample \(n)")
                                    }.buttonStyle(.borderedProminent)
                                    
                                }
                            }
                        }.background(Material.thick)
                    }
                    
                }
            }.navigationTitle("Test")
        }
    }
}

#Preview {
    StickyNavigationBar()
}

赞(0）回复(0）举报 2023-09-30

nfs0ujit2#

在App Store应用程序中。我假设他们使用修饰符.searchable(text: Binding<String>, placement: .navigationBarDrawer(displayMode: .always)来显示例如导航栏中的搜索栏。displayMode .always的存在只是为了让搜索栏在滚动时不会“折叠”，但它总是“展开”。
希望我的回答有意义：）

赞(0）回复(0）举报 2023-09-30

我来回答