CODEWITHSUNDEEP
swiftui
1dolinski
1dolinski

Reputation: 549

SwiftUI Two Row NavigationBar

Is there a way using SwiftUI to get a two row NavigationBar like instagram has? Even better would be two rows with a fullwidth search bar like in the image.

ex. enter image description here

Upvotes: 0

Views: 468

Answers (1)

Cod3rMax
Cod3rMax

Reputation: 958

Here you go an example close to the image, of course it can be redesigned to suit your needs I did it very quickly it doesn't look nice, but as I said it can be redesigned to look much nicer:

@State var testok = ""

var body: some View {
        VStack {
        
        VStack {
            TextField("search here man", text: $testok)
                .frame(maxWidth: .infinity)
                .frame(height: 40)
                .background(Color.red)
                .cornerRadius(10)
                .padding()
            
            ScrollView(.horizontal){
                HStack(spacing: 0) {
                    Text("ok")
                        .frame(width: 80, height: 50)
                        .background(Color.green)
                        .cornerRadius(8)
                        .padding(.horizontal, 10)
                    
                    Text("yumyum")
                        .frame(width: 80, height: 50)
                        .background(Color.green)
                        .cornerRadius(8)
                        .padding(.horizontal, 10)
                    
                    Text("lool")
                        .frame(width: 80, height: 50)
                        .background(Color.green)
                        .cornerRadius(8)
                        .padding(.horizontal, 10)
                    
                    Text("pewpew")
                        .frame(width: 80, height: 50)
                        .background(Color.green)
                        .cornerRadius(8)
                        .padding(.horizontal, 10)
                }
                
            }
            
        }
            NavigationView {
                NavigationLink(destination: Text("ok")) {
                    Text("ok")
                     .navigationTitle(Text("navigation title"))
                }
            }
        }
        
    }

Upvotes: 1

Related Questions