coiai Logo

This article is an English translation of the original Japanese post. Read the Japanese original →

[SwiftUI] Making a Numbered List

December 24, 2023

Categories: SwiftUI

I wanted to make a numbered bullet list in SwiftUI!

Doing this gives you the following.

Here's the code. Swap it out to fit your own setup.

struct TutorialView: View {
    let items = [
        "Connect your iPhone to your Mac with a cable.",
        "Open QuickTime Player on your Mac.",
        "Select File > New Movie Recording.",
        "Click the arrow next to the record button and select your iPhone.",
        "In the movie recording screen, device information will be displayed in the detailed settings. Click the arrow next to the red recording button and select ‘iPhone’ for the Screen."
    ]

    var body: some View {
        Text("How to mirror on Mac using QuickTime Player")
            .font(.title)
        VStack(alignment: .leading) {
            ForEach(items, id: \.self) { item in
                HStack(alignment: .top) {
                    Text("\(items.firstIndex(of: item)! + 1).")
                        .font(.body)
                        .fontWeight(.bold)
                    Text(item)
                        .font(.body)
                }
                .padding(.top, 6)
            }
        }
        .padding()
    }
}

#Preview {
    TutorialView()
}