【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()
}

coiai.netでは案件受付中です。
Vtuber、建築モデリング、EC構築、ネイティブアプリ制作、制服の制作(実は縫製業もメイン)、Vision Pro向けアプリ etc…
様々な制作開発を行っています。

ご気軽にご相談ください!

コイアイちゃんのアバター

この記事を書いたのは


Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Top
Blog
Works
contact