【SwiftUI】箇条書きにしたい!

SwiftUIを使って番号付きの箇条書きにしたい!

これをやると下記のようになります。

以下コードです。自分の環境に合わせて置き換えてください。

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()
}
コイアイちゃん Avatar

この記事を書いたのは


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA