I am looking to add a navigation bar with title to tutorial I am following. Any help will be much appreciated

Question

import SwiftUI

struct ContentView: View { var emojis = ["????", "????", "????", "????", "????", "????", "????", "????", "????", "✈️", "????", "????", "????", "????", "????", "????", "⛵️", "????", "????", "????", "????", "????", "????", "????"]

@State var emojiCount = 20


var body: some View {
    VStack {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                    CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                }
            }
        }
        .foregroundColor(.red)
        Spacer()
        HStack {
            remove
            Spacer()
            add
            
        }
        .font(.largeTitle)
        .padding(.horizontal)
    }
    .padding(.horizontal)
}
var remove: some View {
    Button {
        if emojiCount > 1 {
            emojiCount -= 1
        }
    } label: {
        Image(systemName: "minus.circle")
    }
}
var add: some View {
    Button {
        if emojiCount < emojis.count {
            emojiCount += 1
        }
    } label: {
        Image(systemName: "plus.circle")
    }
}

}

struct CardView: View { var content: String @State var isFaceUp: Bool = true

var body: some View {
    ZStack {
        let shape = RoundedRectangle(cornerRadius: 20.0)
        if isFaceUp {
            shape.fill().foregroundColor(.white)
           shape.strokeBorder(lineWidth: 3.0)
            Text(content).font(.largeTitle)
        } else {
            shape.fill()
        }
    }
    .onTapGesture {
        isFaceUp = !isFaceUp
    }
}

}

Welcome to SO! Adding a navigation bar and title is a pretty common task in SwiftUI. What have you tried so far? Did you try something you found that didn't work for you? — jnpdx
Yes, I am extremely new to coding. I have tried inserting navigation view and Navigation title but neither worked. I also just tried adding text to the top but that didn't work either. My issue I believe is the placement of the code. — dwaynedlv
Can you show what you've tried? Looking at some tutorials might help, too: hackingwithswift.com/articles/216/… — jnpdx
Yes I have been watching them but when I try to place what they show it doesn't work with the code I already have. — dwaynedlv

Gabriel Medina Gabriel Medina · Accepted Answer · 2021-08-18T19:03:50

Have you tried to add the VStack to a NavigationView and then set the navigationTitle to it?

Maybe something like this should work:

var body: some View {
    NavigationView {
        VStack {
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                    ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                        CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                    }
                }
            }
            .foregroundColor(.red)
            Spacer()
            HStack {
                remove
                Spacer()
                add
                
            }
            .font(.largeTitle)
            .padding(.horizontal)
        }
        .navigationTitle("Title here!")
        .padding(.horizontal)
    }
}

I am looking to add a navigation bar with title to tutorial I am following. Any help will be much appreciated

1 Answers