【SwiftUI】図形描画の中で文字を左寄せにする方法

いつも大変お世話になっております。

リスト内で左側にリスト用ラベル、右側に簡単な情報を表示されるものを
作っております。

問題になっているのは、右側の文字（１１１１、２２２、３）となります。
これらを紫色の四角形の中の左側に寄せたいのですが、うまくいきません。
どうすれば良いでしょうか。

画像イメージ

プログラム

SwiftUI
1
2import SwiftUI
3
4struct ContentView: View {
5    @State var Array = ["１行目", "２行目", "３行目", "４行目", "５行目", "６行目"]
6 
7    var body: some View {
8        
9        VStack {
10            ZStack{
11                RoundedRectangle(cornerRadius: 0)
12                    //.fill(Color(red:0.05, green:0.5, blue:1.0))
13                    .fill(Color(red:0.4, green:0.8, blue:0.6))
14                    .frame(width:UIScreen.main.bounds.width * 1 ,
15                           height:UIScreen.main.bounds.height * 0.07)
16                    
17                
18                
19                Text("Title")
20                    .foregroundColor(Color.white)
21                    .font(.system(size: 20, weight: .bold, design: .default))
22                
23                
24            }
25            NavigationView {
26                List {
27                    ForEach(Array, id: .self) { Arr in
28                        NavigationLink(destination: DetailView(name: Arr)) {
29                            HStack {
30                                Text(Arr)
31                                Spacer()
32                                ZStack(alignment: .topTrailing)  {
33                                    
34                                    Rectangle()
35                                        //.fill(Color(red:0.05, green:0.5, blue:1.0))
36                                        .fill(Color(red:0.8, green:0.4, blue:0.6))
37                                        .frame(width:UIScreen.main.bounds.width * 0.2 ,
38                                               height:UIScreen.main.bounds.height * 0.07)
39                                    VStack {
40                                     
41                                        Text("１１１１")
42                                            .font(.system(size: 12, weight: .light, design: .default))
43                                            .foregroundColor(.black)
44                      
45                                        Text("２２２")
46                                            .font(.system(size: 12, weight: .light, design: .default))
47                                            .foregroundColor(.black)
48                                        Text("３")
49                                            .font(.system(size: 12, weight: .light, design: .default))
50                                            .foregroundColor(.black)
51                                    }
52                                }
53                            }
54                        }
55                    }
56                }
57                .navigationBarTitle("Test")
58                .navigationBarHidden(true)
59            }
60        }
61    }
62}
63
64struct DetailView: View {
65    var name: String = "Hello SwiftUI"
66    var body: some View {
67        Text(name).font(.system(size: 30))
68    }
69}
70
71struct ContentView_Previews: PreviewProvider {
72    static var previews: some View {
73        ContentView()
74    }
75}
76
77struct DetailView_Previews: PreviewProvider {
78    static var previews: some View {
79        DetailView()
80    }
81}
82

行動規範の内容に同意します

回答1件

ベストアンサー

左寄せなら ZStack と VStack の alignment を leading にすれば良いのでは。

swift
1                                ZStack(alignment: .topLeading) {
2                                    // 略
3                                    VStack(alignment: .leading) {

(右寄せなら trailing ですね。)

swift
1                                ZStack(alignment: .topTrailing) {
2                                    // 略
3                                    VStack(alignment: .trailing) {