ios - 导航栏只有在滚动时才有背景

Question

我正在尝试实现从导航 View 链接的详细 View 。在此详细 View 中，顶部有一个默认导航栏和一个后退按钮。但是当我向上滚动时，该栏只显示一些颜色。我不知道为什么。

没有卷轴:

滚动:

最初，无论是否滚动，导航栏都没有背景。所以我创建了一个 init() 方法来设置样式。

 init(fruit: Fruit) {
    self.fruit = fruit
    if #available(iOS 15.0, *) {
        let navigationBarAppearance = UINavigationBarAppearance()
        navigationBarAppearance.configureWithDefaultBackground()
        
        UINavigationBar.appearance().standardAppearance = navigationBarAppearance
        UINavigationBar.appearance().compactAppearance = navigationBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
    }
  }

Body View 是外部的导航 View 和内部的 ScrollView 。** 对于任何想知道为什么我将导航栏设置为隐藏在 VStack 中的人来说，是因为如果我不隐藏它，图像上方会有一些巨大的空间。 (我不知道为什么)

** 更新代码 **我更新了使用不透明背景的代码。但似乎这些配置都不可见。

init(fruit: Fruit) {
    self.fruit = fruit
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
    UINavigationBar.appearance().standardAppearance = navBarAppearance
}

var body: some View {
    NavigationView {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: .center, spacing: 20) {
                // HEADER
                FruitHeaderView(fruit: fruit)
                
                VStack(alignment: .leading, spacing: 20) {
                    // TITLE
                    Text(fruit.title)
                        .font(.largeTitle)
                        .fontWeight(.heavy)
                        .foregroundColor(fruit.gradientColors[1])
                    
                    
                } //: VSTACK
                .padding(.horizontal, 20)
                .frame(maxWidth: 640, alignment: .center)
            } //: VSTACK
            .navigationBarHidden(true)
        } //: SCROLL
        .edgesIgnoringSafeArea(.top)
    } //: NAVIGATION
    .navigationBarTitle(fruit.title, displayMode: .inline)
    .navigationViewStyle(StackNavigationViewStyle())
}

*** 解决方案 ***原来我必须将导航栏的配置代码放在父 View 中。在初始化()期间。任何人都可以在父 View 中解释为什么会这样吗？或者，如果我想在 parent 和 child 中使用不同的风格，我应该怎么做？

    init() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
         UINavigationBar.appearance().standardAppearance = navBarAppearance
    }

var body: some View {
    NavigationView {
        List {
            ForEach(fruits.shuffled()) { item in
                NavigationLink {
                    FruitDetailView(fruit: item)
                } label: {
                    FruitRowView(fruit: item)
                        .padding(.vertical, 4)
                }
            }
        }
        .listStyle(.plain)
        .navigationTitle("Fruits")
    } //: NAVIGATION

}

Answer 1

你需要不透明的外观，因为默认一个意味着system-selected-by-design，它随着版本的不同而变化。

    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance

使用 Xcode 13.3/iOS 15.4 测试(在 ContentView.init 中)

注意:onAppear 来不及注入(inject)上面的代码，外观设置应用于它之后创建的对象，onAppear 在创建 NavigationView 之后调用。因此，可以在 init 中或其他任何地方使用它，但要在创建 View 之前使用它。