CODEWITHSUNDEEP
iosswiftswiftui
mars_dev
mars_dev

Reputation: 639

navigationBarTitle overlapping with List title in SwiftUI

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: enter image description here

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

Upvotes: 0

Views: 2017

Answers (2)

jguillen
jguillen

Reputation: 189

You may try adding the .navigationBarTranslucent modifier and set it to false

.navigationBarTranslucent(false)

Upvotes: 0

vj9
vj9

Reputation: 1554

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.

Upvotes: 0

Related Questions