navigationBarTitle overlapping with List title in SwiftUI

Question

I have just started on working with SwiftUI and trying to implement a View with both horizontal and vertical list. Although the design looks fine but there is some overlapping in the top item of the List title with navigation bar title. Please check the image:

There are 2 horizontal Scrollvies in a List. Also the title of the second scrollView is also not visible. Following is my navigation view code:

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

The items of the list are in the following files as horizontal scrollview:

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

vj9 vj9 · Accepted Answer · 2020-07-29T19:01:40

Seems like it is due to the fixed frame you are giving to each element in the list:

.frame(height: 320)

Try removing the fixed height, or make sure that the DrinkRow fits well within this size.

navigationBarTitle overlapping with List title in SwiftUI

2 Answers