【SwiftUI】箇条書きできるViewを作成する

はじめに

箇条書きViewってありそうでないんですよね
そう思ったので作ってみました。

サンプルアプリ

実装

import SwiftUI

struct BulletPointListView: View {
    let alignment: HorizontalAlignment
    let spacing: CGFloat?
    let bulletPointShape: BulletPointShape
    let items: [String]
    
    init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, bulletPointShape: BulletPointShape, items: String...) {
        self.alignment = alignment
        self.spacing = spacing
        self.bulletPointShape = bulletPointShape
        self.items = items
    }
    
    enum BulletPointShape: String {
        case circle = "circle"
        case circleFill = "circle.fill"
        case square = "square"
        case squareFill = "square.fill"
        case diamond = "diamond"
        case diamondFill = "diamond.fill"
    }

    var body: some View {
        VStack(alignment: alignment, spacing: spacing) {
            ForEach(items, id: \.self) { item in
                HStack(alignment: .top, spacing: 5) {
                    Text(Image(systemName: bulletPointShape.rawValue))
                        .scaleEffect(0.5) // BulletPointのサイズを調整
                    
                    Text(item)
                }
            }
        }
    }
}

使い方

import SwiftUI

struct ContentView: View {
    var body: some View {
        BulletPointListView(
            bulletPointShape: .circle,
            items: "あいうえお", "かきくけこ", "さしすせそ", "たちつてと"
        )
    }
}

おわり

本当はこんな感じで作りたかったのですが、技術不足で実現できませんでした。

BulletPointListView(bulletPointShape: .circle) {
    Text("あいうえお")
    Text("かきくけこ")
    Text("さしすせそ")
    Text("たちつてと")
}

こんな感じでできませんかね？