Helpful Translations

A phrasebook with structured data: a list of phrases, each with translations in a few languages. Tap a phrase to see all its translations. It's a deeper look at data modeling and list navigation.

What you'll build

A list of common phrases on the main screen. Tap one to go to a detail screen showing the phrase translated into several languages.

Key concepts

Structured data model — Each phrase is a struct with a source string and a dictionary of translations.

struct Phrase: Identifiable {
    let id = UUID()
    let english: String
    let translations: [String: String]
}

let phrases = [
    Phrase(english: "Thank you",
           translations: ["Spanish": "Gracias", "French": "Merci", "Japanese": "ありがとう"]),
    Phrase(english: "Where is the bathroom?",
           translations: ["Spanish": "¿Dónde está el baño?", "French": "Où sont les toilettes?"]),
]

NavigationStack — Navigate from a list to a detail view. NavigationStack manages the back button and the navigation hierarchy.

NavigationStack {
    List(phrases) { phrase in
        NavigationLink(phrase.english, value: phrase)
    }
    .navigationDestination(for: Phrase.self) { phrase in
        PhraseDetailView(phrase: phrase)
    }
}

Detail view — The detail screen iterates over the translations dictionary to show each language and its phrase.

Data modeling

The way you structure your data shapes every view that displays it. A flat array gives you a list. A struct with nested values gives you a detail view. Think about the data first; the views follow naturally.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and look something up.