作ったきっかけ

SwiftUIの基本であるHstackとVstackとSpacerをより理解するために何か作れないかと
思い作ってみました。

完成物

下記の画像になります。

こちらの画像のコード載せようと思ったのですが単調ですごく長くなるので一部だけ載せて
残りはgitのURLを貼っておきます。
下記は帽子を作成しているパーツになります。
基本は作りたいドットに合わせてパーツを組み合わせていくだけなのですが
唯一注意するのは上下のパーツの位置を合わせる時に Spacer().frame(width: 20)等で
位置を指定してあげる必要があります。

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(spacing: 0) {
                //帽子のパーツ
                Group{
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(width: 50, height: 10)
                    HStack(spacing: 0) {
                        Spacer()
                            .frame(width: 20)
                        // 右にスペースを追加
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: 80, height: 10)
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: 10, height: 10)
                    }
                }

もし全て気になる方いらっしゃいましたら下記にあります。
https://github.com/yasuyamakyosuke/DotMario

他にもドット絵なら色々作れそうで面白かったです。