swiftui：list内に並べた複数の項目をきれいに揃えたい

Question

teratailにお世話になっています。

swiftUIのリスト表示で例えば、

                            HStack {
                                Image(systemName: "1.square")
                                Spacer()
                                Text(time[0])
                                Spacer()
                                Text(times[0])+"s")                              
                            }

のように行い、

のような結果を得ています。
ただ、見ていただいたように、特に真ん中の列のフォームを他の列とずれた表示となってしまいます。

ここで

[1]    123.45   123s
[2]     67.80    11s
[3]   9876.54.  321s

のように表示をきれいに揃えるにはどうしたらいいでしょうか？

Comments

[hoshi-takanori]

こんな感じ？
https://stackoverflow.com/questions/56588332/align-two-swiftui-text-views-in-hstack-with-correct-alignment

Answer 1

肝は、HStack内の要素を右寄せにすることです。

.frame(maxWidth: .infinity, alignment: .trailing)で要素内を右寄せにすることで、以下のような配置を実現することが可能です。

[1]    123.45   123s
[2]     67.80    11s
[3]   9876.54.  321s

また、HStackには、自動的に余白ができてしまうので、HStack(spacing: 0) { で余白が勝手に作成されるのを解除します。

例）

            List {
                HStack(spacing: 0) {
                    Image(systemName: "1.square")
                    Spacer()
                    Text("123.45")
                    Spacer()
                    Text("1229.2s")
                }
                .frame(maxWidth: .infinity, alignment: .trailing)

                HStack(spacing: 0) {
                    Image(systemName: "1.square")
                    Spacer()
                    Text("9876.54")
                    Spacer()
                    Text("-1229.2s")
                }
                .frame(maxWidth: .infinity, alignment: .trailing)
                
                HStack(spacing: 0) {
                    Image(systemName: "1.square")
                    Spacer()
                    Text("67.8")
                    Spacer()
                    Text("12.2s")
                }
                .frame(maxWidth: .infinity, alignment: .trailing)
            }

Comments

[masa328]

ありがとうございました。希望通りの表示になりました！