Question

我刚刚开始使用SwiftUI，并尝试使用水平和垂直列表实现View。尽管设计看起来不错，但“列表”标题的顶部与导航栏标题有些重叠。请检查图片：

列表中有2个水平Scrollvie。此外，第二scrollView的标题也不可见。以下是我的导航视图代码：

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

Answer 1

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

.frame(height: 320)

请尝试移除固定高度，或确保DrinkRow恰好适合此尺寸。

Answer 2

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

.navigationBarTranslucent(false)

navigationBarTitle与SwiftUI中的列表标题重叠

2 个答案: