🌟

SwiftUIでよくある選択式の設定画面を作る

2022/05/09に公開約1,800字

はじめに

最近SwiftUIを本格的に始めたのですが、シンプルな設定画面を作ってみたところUIKitと比べてかなり簡単に書けて感動したので共有します。

作った画面

複数の選択項目が表示されていて、一つを選択するとそこにチェックマークが表示されるよくあるやつです。

コード

enumは選択項目ためのサンプルのデータ構造なのでenumである必要はないです。
UseCaseは実装を省きますが、選択項目の保存や読み込みができれば良いのでRepositoryでもDataStoreでもよいですし、その先もRealmでもUserDefaultsでもサーバサイドのAPIでも良いと思います。

本体(ItemSelectionView)が20行程度で書けちゃいますね、すっきり。

enum ItemType: Int, Identifiable, CaseIterable {
    var id: Int { rawValue }
    case item1
    case item2
    case item3
    
    var displayName: String {
        switch self {
        case .item1:
            return "一つ目のアイテム"
        case .item2:
            return "2つ目のアイテム"
        case .item3:
            return "3つ目のアイテム"
        }
    }
}

struct ItemSelectionView: View {
    @State private var selected: ItemType
    private let itemTypeUseCase = ItemTypeUseCase()
    
    init() {
        selected = itemTypeUseCase.loadCurrentItemType()
    }
    
    var body: some View {
        List() {
            ForEach(ItemType.allCases) { item in
                CheckmarkRow(title: item.displayName,
                             isChecked: item == selected)
                .onTapGesture {
                    itemTypeUseCase.saveItemType(item)
                    selected = item
                }
            }
        }.navigationTitle("アイテム選択")
    }
}

struct CheckmarkRow: View {
    private let title: String
    private let isChecked: Bool
    init(title: String, isChecked: Bool) {
        self.title = title
        self.isChecked = isChecked
    }
    
    var body: some View {
        HStack {
            Text(title)
            Spacer()
            if isChecked {
                Image(systemName: "checkmark")
            }
        }
        .contentShape(Rectangle())
    }
}

Discussion

ログインするとコメントできます