导航栏只有滚动时才有背景答案

【问题标题】：Navigation bar only have background when scroll导航栏只有滚动时才有背景
【发布时间】：2022-08-09 21:31:18
【问题描述】：

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

无滚动：

滚动：

最初，导航栏在滚动或不滚动时都没有背景。所以我创建了一个 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 是外部的导航视图和内部的滚动视图。 ** 对于任何人想知道为什么我将导航栏设置为隐藏在 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())
}

*** 解决方案 *** 事实证明，我必须将导航栏的配置代码放在父视图中。在 init() 期间。谁能在父视图上解释为什么会这样？或者，如果我想要父母和孩子的风格不同，我该怎么办？

    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

}

检查这个很棒的教程bigmountainstudio.com/community/public/posts/…
使用 navigationBarAppearance.configureWithTransparentBackground() 代替 .configureWithDefaultBackground()
这是否回答了您的问题stackoverflow.com/a/65523676/12299030？
@Asperi 不，我不想要一个透明的导航栏。我希望导航栏具有与滚动时相同的非透明背景。

标签： ios swift swiftui scroll transparent

【解决方案1】：

您需要不透明的外观，因为default 一个表示system-selected-by-design，它会随着版本的变化而变化。

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

使用 Xcode 13.3 / iOS 15.4 测试（在 ContentView.init 中）

注意：onAppear 来不及注入上面的代码，外观设置是应用在它之后创建的对象上，onAppear 是在 NavigationView 创建之后调用的。因此，在 init 或其他任何地方使用它，但在创建视图之前。

【讨论】：

这似乎是 UIKit 而不是 SwiftUI
@PtitXav，可以在init 中使用，请参见此处的示例stackoverflow.com/a/65523676/12299030。
@Asperi 我更新了您提到的代码，并将其放在 onAppear() 期间。但它仍然不起作用。你可以参考我上面更新的代码和图片。
@JonathanLiu，onAppear 为时已晚，外观设置应用于创建的对象后它，并且在 NavigationView 创建后调用 onAppear。因此，在 init 或其他任何地方使用它，但在创建视图之前。
@Asperi，将其修改为 init()。但它仍然是这样的。我更新了上面的图像和代码。

【解决方案2】：

        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navigationController?.navigationBar.shadowImage = UIImage()

在 viewWillAppear 中使用此代码

【讨论】：

这似乎是 UIKit 位 SwiftUI

【解决方案3】：

使用我的扩展：

extension UIViewController {
func configureNavigationBar(largeTitleColor: UIColor, backgoundColor: UIColor, tintColor: UIColor, title: String, preferredLargeTitle: Bool) {
if #available(iOS 13.0, *) {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: largeTitleColor]
navBarAppearance.titleTextAttributes = [.foregroundColor: largeTitleColor]
navBarAppearance.backgroundColor = backgoundColor
navigationController?.navigationBar.standardAppearance = navBarAppearance
navigationController?.navigationBar.compactAppearance = navBarAppearance
navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance

navigationController?.navigationBar.prefersLargeTitles = preferredLargeTitle
navigationController?.navigationBar.isTranslucent = false
navigationController?.navigationBar.tintColor = tintColor
navigationItem.title = title

} else {
// Fallback on earlier versions
navigationController?.navigationBar.barTintColor = backgoundColor
navigationController?.navigationBar.tintColor = tintColor
navigationController?.navigationBar.isTranslucent = false
navigationItem.title = title
  }
 }
}

在 viewDidAppear 或 viewDidLoad 中调用它，在您的情况下将背景设置为清除...如何使用：

configureNavigationBar(largeTitleColor: .yourColor, backgoundColor: .yourColor, tintColor: .yourColor, title: "YourTitle", preferredLargeTitle: false)

【讨论】：

这似乎是 UIKit 而不是 SwiftUI

【解决方案4】：

这对我有用 -

func changeNavBar(navigationBar: UINavigationBar, to color: UIColor) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = color
            navigationBar.standardAppearance = appearance;
            navigationBar.scrollEdgeAppearance = navigationBar.standardAppearance
}

【讨论】：