[SwiftUI] 表示要素を同じサイズにする方法

⌛️ 2 min.

SwiftUIのHStackを使って要素を並べるときに、同じサイズをつかって、並べたいと思うことがよくあります。

.frameを使うのも１つですが、このPostで、良い方法が説明されていたので、メモ

問題点：要素のサイズがそれぞれ違う

数値を横一列に表示するようなケースだと、以下のようなコードになるかと思います。

普通に作るとこうなります


struct ContentView: View {
    let numbers: [Int] = [34, 21, 1, 97, 11]

    var body: some View {
        HStack {
            ForEach(self.numbers, id: \.self) { num in
                Text(String(num))
                    .padding(4)
                    .background(Color.orange)
                    .cornerRadius(5)
            }
        }
    }
}

表示は、以下のようになります。

文字のサイズからそれぞれの大きさが計算されるので、１と９７では、表示要素の大きさが違っています。同じ２桁の数字でも、３４と１１では違います。
文字列の一部として表示されるときは、綺麗な表示ということになりますが、要素を一列に並べたいときは、同じ大きさに揃えたくなります。

.frame

１番目に思いつくのが、外から数値指定してしまうことです。.frame　を使うと以下のようになります。

.frameで揃える


struct ContentView: View {
    let numbers: [Int] = [34, 21, 1, 97, 11]

    var body: some View {
        HStack {
            ForEach(self.numbers, id: \.self) { num in
                Text(String(num))
                    .frame(width: 30, height: 30)
                    .background(Color.orange)
                    .cornerRadius(5)
            }
        }
    }
}

表示は以下のようになります。

実は、この方法にも問題点があります。システム設定でフォントサイズを大きくしていると、以下のような表示になってしまいます。

.overlay

この方法を考えた人は、TemplateViewと呼んでいますが、以下のような形で、要素を大きさを揃えることもできます。

TemplateView


struct ContentView: View {
    let numbers: [Int] = [34, 21, 1, 97, 11]

    var body: some View {
        HStack {
            ForEach(self.numbers, id: \.self) { num in
                Text("121")      //  ⬅️　調整余地あり
                    .hidden()
                    .padding(5)
                    .background(Color.orange)
                    .cornerRadius(5)
                .overlay(Text(String(num)))
            }
        }
    }
}

表示は以下のようになります。