I'm trying to do the challenge for WordScramble and while everything is functional, the layout looks pretty bad. I find the interactions between the various view elements to be unpredictable and struggle to get the result I have in my head.

In this case I wrapped the NavigationView in a VStack and put a Text element above it to display the score, but this caused the navigationTitle to become small. Adding a .font modifier does not affect the navigationTitle, but the TextField instead. I'd like the navigationTitle to be left-aligned and in a larger font. Ideally, I'd also like the New Game button to be above and to the right of the Score Text field but if I attach toolbar to the VStack the toolbar disappears.

What am I missing here?

    VStack {
        Text("Score: \(score)").font(.title)
        NavigationView {
            List {
                Section {
                    TextField("Enter your word", text: $newWord)
                        .autocapitalization(.none)
                }

                Section {
                    ForEach(usedWords, id: \.self) { word in
                        HStack {
                            Image(systemName: "\(word.count).circle")
                            Text(word)
                        }
                    }
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("New Game", action: startGame)
                }
            }
            .navigationTitle(rootWord)
            .onSubmit(addNewWord)
            .onAppear(perform: startGame)
            .alert(errorTitle, isPresented: $showingError) {
                Button("OK", role: .cancel) { }
            } message: {
                Text(errorMessage)
            }
        }
    }
}

NavigationViews appear to be rather fickle. If I embed them in an HStack or VStack the title becomes small and centered instead of large and left-aligned. I haven't been able to find any way of customizing the title either, or having the navigationTitle on the left with small text (such as the score) on the same line but on the right hand side.

This was the best I could come up with; it's better than before but not great. I was able to tuck the score in the top left across from the New Game button.

    NavigationView {
        List {
            Section {
                TextField("Enter your word", text: $newWord)
                    .autocapitalization(.none)
            }

            Section {
                ForEach(usedWords, id: \.self) { word in
                    HStack {
                        Image(systemName: "\(word.count).circle")
                        Text(word)
                    }
                }
            }
        }
        .navigationTitle(rootWord)
        .onSubmit(addNewWord)
        .onAppear(perform: startGame)
        .alert(errorTitle, isPresented: $showingError) {
            Button("OK", role: .cancel) { }
        } message: {
            Text(errorMessage)
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("New Game", action: startGame)
            }
            ToolbarItem(placement: .navigationBarLeading) {
                Text("Score: \(score)").font(.headline)
            }
        }
    }