如何修复 TabView 中 NavigationView 中 List 下的灰色条? [英] How to fix gray bar under List in NavigationView in TabView?

问题描述

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

So I am having a problem where just below my list I am having a gray bar that appears and when I click on a cell to go to the other view there is an even bigger gray bar. Here is the code for the List View:

 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"))

            }

这里是单独视图的代码:

And here is the code for the separate view:

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)
                }

        }
        }
    }
}

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

Also I know this appears very similar to This Question, but when I implemented the solution on that page it would just change the color of the top Navigation Bar Title and not the gray on the bottom.

此外，这是我设计标签栏和导航栏的样式

Also, this is where I am styling both the Tab Bar and the Navigation Bar

 init() {

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

推荐答案

我看到堆栈中有很多 NavigationView:

I see there are many NavigationView in the stack:

 VStack{
             NavigationView{ // << here in first snapshot
                VStack{

和

        NavigationView{ // << here in second snapshot
            ZStack{

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

and as there no complete code provided there are possible others as well...

这是一个拇指规则:在一个视图层次链中必须只有一个根 NavigationView.因此，请确保将一个 NavigationView 作为过去日志选项卡的选项卡项根视图(同样，仅基于提供的代码的假设).

Here is a thumb-rule: there must be only one root NavigationView in one view hierarchy chain. So make sure you place one NavigationView as tab-item root view of Past Journals tab (again, assumption based only on provided code).

这篇关于如何修复 TabView 中 NavigationView 中 List 下的灰色条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！