navigationBarTitle 与 SwiftUI 中的列表标题重叠答案

【问题标题】：navigationBarTitle overlapping with List title in SwiftUInavigationBarTitle 与 SwiftUI 中的列表标题重叠
【发布时间】：2020-07-29 18:21:09
【问题描述】：

我刚刚开始使用 SwiftUI 并尝试实现具有水平和垂直列表的视图。虽然设计看起来不错，但列表标题的顶部项目与导航栏标题有一些重叠。请检查图像：

一个列表中有 2 个水平滚动视图。第二个滚动视图的标题也不可见。以下是我的导航视图代码：

struct HomeView: View {
    var categories: [String: [Drink]] {
        .init(
            grouping: drinkData, by: {$0.category.rawValue})
    }
    var body: some View {
        NavigationView {
            List {
                ForEach(categories.keys.sorted(), id: \String.self) { key in
                    DrinkRow(categoryName: "\(key) Drinks", drinks: self.categories[key]!)
                        .frame(height: 320)
                        .padding(.top)
                        .padding(.bottom)
                }
            }
        .navigationBarTitle(Text("COFFEE DB"))
        }
    }
}

列表的项目在以下文件中作为水平滚动视图：

struct DrinkRow: View {
    var categoryName: String
    var drinks: [Drink]
    var body: some View {
        VStack(alignment: .leading) {
            Text(self.categoryName)
                .font(.title)
            ScrollView(.horizontal, showsIndicators: false) {
                 HStack {
                     ForEach(self.drinks, id: \.name) { drink in
                        NavigationLink(destination: DrinkDetail(drink: drink)) {
                            DrinkItem(drink: drink).frame(width: 300).padding(.trailing, 30)
                        }
                     }
                 }
            }
        }.padding(.top)
    }
}

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

似乎这是由于您为列表中的每个元素提供的固定框架：

.frame(height: 320)

尝试移除固定高度，或确保DrinkRow 完全适合此尺寸。

【讨论】：

【解决方案2】：

您可以尝试添加 .navigationBarTranslucent 修饰符并将其设置为 false

.navigationBarTranslucent(false)

【讨论】：