[SwiftUI] 超簡単！ラジオボタンの実装方法！

はじめに

「SwiftUIでラジオボタンを実装したい！」と思っても、HTMLのinputのように元から用意されていません。
その代わり、同じ様な使い方ができるPickerなどもありますが、意地でもラジオボタンを作成したい方のために、この記事ではシンプルにラジオボタンの実装方法を解説しようと思います。

対象者

この記事は下記のような人を対象にしています。

• プログラミング初学者
• 駆け出しエンジニア
• ラジオボタンを作成方法を検索をしても、「難しい記事しかない😫」と感じた方
• Pickerを使用したくない方

完成物

コード

@State private var selectedIndex = 0

private let selectNames = ["たかし", "チワワ", "ひよこ"]

var body: some View {
    VStack {
        Spacer()
        
        ForEach(0..<selectNames.count, id: \.self, content: { index in
            HStack {
                Text(selectNames[index])
		// 解説1
                Image(systemName: selectedIndex == index ? "checkmark.circle.fill" : "circle")
                    .foregroundColor(.blue)
            }
            .frame(height: 40)
	    // 解説2
            .onTapGesture {
                selectedIndex = index
            }
        })
        
        Spacer()
    }
}

解説

１.各項目をタップした時の処理

.onTapGesture {
    selectedIndex = index
}

onTapGestureModifierを使用して、selectedIndexの値にタップした要素のindexを代入しています。

2.タップした際に画像を変更する処理

Image(systemName: selectedIndex == index ? "checkmark.circle.fill" : "circle")

三項演算子を使用して、ForEachのindexとselectedIndexの値が同じときにImageを変更するようにしてラジオボタンを押した状態を再現しています。

おわりに

上記のコードだけで簡単にラジオボタンを実装することができます。
配列の値を使用したい場合はselectNames[selectedIndex]で中身を取得することもできるので、ラジオボタンを実装したい時はコピペするだけでいつでも使用することができます！

最後に記事を見てくださりありがとうございました。
いいねをしてくださると、筆者が喜びます:)