如何修复 TabView 中 NavigationView 列表下的灰色条？

Posted 2023-02-23

【中文标题】如何修复 TabView 中 NavigationView 列表下的灰色条？

【英文标题】：How to fix gray bar under List in NavigationView in TabView?

【发布时间】：2020-04-15 19:01:22

【问题描述】：

所以我遇到了一个问题，在我的列表下方出现一个灰色条，当我单击一个单元格转到另一个视图时，会出现一个更大的灰色条。这是列表视图的代码：

 VStack
             NavigationView
                VStack



                List
                    ForEach(answersArray.indices, id: \.self)  day in
                        NavigationLink(destination: DetailView(questions: self.answersArray[day].questions, answers: self.answersArray[day].answers, date: self.answersArray[day].dayDone.toString(dateFormat: "MM/dd/yy"))) 


                        HStack
                            VStack
                                ForEach(self.answersArray[day].questions.indices)  question in
                                    //Text(question)
                                    Text(self.answersArray[day].questions[question])
                                    .lineLimit(1)
                                        .frame(width: 250, height: 30, alignment: .leading)
                                      //  .padding(.vertical, 5)
                                    //.padding(.bottom)

                                

                            
                           // .truncationMode(.tail)
                            //.frame(minWidth: 0, idealWidth: 200, maxWidth: .infinity, minHeight: 0, idealHeight: 50, maxHeight: 75, alignment: .leading)

                            Text(self.answersArray[day].dayDone.toString(dateFormat: "MM/dd/yy"))
                                .frame(minWidth: 0, idealWidth: 50, maxWidth: .infinity, minHeight: 0, idealHeight: 20, maxHeight: 20, alignment: .trailing)
                        

                        .padding(.horizontal, 5)
                    

                        //.frame(minWidth: 0, idealWidth: 250, maxWidth: .infinity, minHeight: 0, idealHeight: 50, maxHeight: 100, alignment: .center)
                    
                    //.colorMultiply(Color("Background Green"))
                  //  .listRowBackground(Color("Background Green"))
                    //.listRowBackground(Color("Background Green"))

                    Button(action: 
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date().addingTimeInterval(100000), lastWeek: false))
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date(), lastWeek: false))
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date(), lastWeek: false))
                    ) 
                        Text("Create cells")
                    
                    
                 .navigationBarTitle("Title")
               //.colorMultiply(Color("Background Green"))




                

             

             .accentColor(Color("My Gray"))

            

这里是单独视图的代码：

import SwiftUI

struct DetailView: View 
    var questions : [String];
    var answers : [String];
    var date : String;
    var body: some View 

            //Color("Background Green")
               //.edgesIgnoringSafeArea(.all)

        NavigationView
            ZStack
            Color("Background Green")
                   .edgesIgnoringSafeArea(.all)
                ScrollView
                    VStack
                        ForEach(questions.indices)  pair in
                            Text(self.questions[pair])
                                .font(.title)
                                .padding()
                            Text(self.answers[pair])
                            .padding()
                                .font(.body)
                            .frame(minWidth: 0, idealWidth: 250, maxWidth: 350, minHeight: 150, idealHeight: 200, maxHeight: .infinity, alignment: .topLeading)
                            .background(
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(Color.black, lineWidth: 1)
                            )

                        

                    
                    .padding(.top)
                    .navigationBarTitle("\(date)", displayMode: .inline)
                

        
        
    

我也知道这看起来与This Question 非常相似，但是当我在该页面上实现解决方案时，它只会更改顶部导航栏标题的颜色，而不是底部的灰色。

另外，这是我为标签栏和导航栏设置样式的地方

 init() 

       UINavigationBar.appearance().backgroundColor = UIColor(named: "Background Green")
       UITabBar.appearance().isTranslucent = false
       UITabBar.appearance().barTintColor = UIColor.black
       

【问题讨论】：

我遇到了同样的问题。

可能与问题无关，但为什么不删除***父 VStack 和 NavigationView 内的那个

你能发布你所有的代码吗？

我最终完全避免了这种方法，并且最近一直在尝试重新创建这个错误，但它没有奏效。我能想到的唯一可以解决的问题是，在最近的 Xcode 更新中，他们要么限制了发生这种情况的情况，要么完全删除了它。自从上次允许模拟设备升级到 13.4.1 的更新以来，有人有这个错误吗？

【参考方案1】：

我看到堆栈中有很多 NavigationView：

 VStack
             NavigationView // << here in first snapshot
                VStack

和

        NavigationView // << here in second snapshot
            ZStack

由于没有提供完整的代码，因此可能还有其他代码......

这是一个thumb-rule：在一个视图层次链中必须只有一个根 NavigationView。因此，请确保将 NavigationView 放置为 Past Journals 选项卡的选项卡项根视图（同样，假设仅基于提供的代码）。

【参考方案2】：

将 UITabBar.appearance().isTranslucent 设置为 false 将打破 NavigationView 所依赖的约束。

要解决此问题，请替换以下代码行：

UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor.black

这些：

let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = UIColor.black
UITabBar.appearance().standardAppearance = tabBarAppearance