ios - navigationBarTitle 与 SwiftUI 中的列表标题重叠

Question

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

列表中有 2 个水平滚动视图。此外，第二个 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)
    }
}

标签： iosswiftswiftui

Answer 1

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

.frame(height: 320)

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