navigationBarTitle 与 SwiftUI 中的列表标题重叠

Posted 2023-02-24

【中文标题】navigationBarTitle 与 SwiftUI 中的列表标题重叠

【英文标题】：navigationBarTitle overlapping with List title in 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)
    

【参考方案1】：

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

.frame(height: 320)

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

【参考方案2】：

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

.navigationBarTranslucent(false)