当列表位于导航栏下方时，如何摆脱出现在导航栏顶部的图层？

Posted 2023-02-23

【中文标题】当列表位于导航栏下方时，如何摆脱出现在导航栏顶部的图层？

【英文标题】：How to get rid of layer that appears on top of navigation bar when list comes under navigation bar?

【发布时间】：2021-12-01 07:53:18

【问题描述】：

我想将导航视图设置为始终为黑色，即使列表位于其下方。现在，在这种情况下，导航视图变为灰色。我想动态更改导航视图的颜色，这就是我使用 NavigationBarModifier 的原因，但由于这与此问题无关，因此我删除了执行此操作的函数。这是当前代码。

import SwiftUI

struct NavigationBarModifier: ViewModifier 
    var backgroundColor: Binding<Color>

    init(backgroundColor: Binding<Color>) 
        self.backgroundColor = backgroundColor
    

    func body(content: Content) -> some View 
        ZStack
            content
            VStack 
                GeometryReader  geometry in
                    self.backgroundColor.wrappedValue
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                
            
        
    


extension View 
    func navigationBarColor(_ bgColor: Binding<Color>) -> some View 
        self.modifier(NavigationBarModifier(backgroundColor: bgColor))
    


struct ContentView: View 
    @State private var bgColor: Color = .black
    
    var body: some View 
        NavigationView 
            
            List 
                Button 
                 label: 
                    Text("Button")
                
                Button 
                 label: 
                    Text("Button")
                
                Button 
                 label: 
                    Text("Button")
                
                  
              .navigationBarColor(self.$bgColor)
         
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

现在是这样的：

【参考方案1】：

这是导航栏的默认行为（列表的内联显示模式），您可以禁用导航栏以摆脱它

    NavigationView 

        List 
            Button 
             label: 
                Text("Button")
            
            Button 
             label: 
                Text("Button")
            
            Button 
             label: 
                Text("Button")
            

        
        .navigationBarHidden(true)           // << here !!
        .navigationBarColor(self.$bgColor)

    

【讨论】：

我可以保留navigationBar吗？因为我需要它来导航:)

就是这样 - 你所谓的layer - 导航栏 - 它是一个功能。你要么拥有，要么没有。