【SwiftUI】リスト内の文字列を左に寄せたかった

2022年5月18日

カテゴリ: 2022 技術

タグ: SwiftUI

問題点

下のようなコードを書いて、リストを作成してみたんだけど・・・

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


List{
                        ForEach(0 ..< task.count) { id in
                            
                            Button(action: {})
                            {
                                ZStack{
                                    Rectangle().fill(.gray)
                                    Text("""
                                        上:\(self.task[id])
                                        下:テスト
                                        """)
                                        .multilineTextAlignment(.leading)
                                }
                            }
                        }
                        Spacer()
                    }
                    .frame(width: 250, height: 350)
                    .listStyle(SidebarListStyle())

こんな感じで表示される

リストを作成する際に、既存のリストの表示（日本語おかしい感じ）を使うのではなく、 ZStackを利用して、背面をRectangleで長方形を描いて、その上に文字列を表示することでボタンっぽく見せています。

この表示のされ方を、中央で文字が揃っているのを左揃えにしたい。

初めに【SwiftUI】テキストのAlignmentについて（左に寄せる方法）

こちらのサイトを参考にしてみたのですがうまくいかない・・・

解決

どうやら、ZStackはデフォルトで子ビューに対して、alignment centerに設定するみたい。（子ビューを中央揃えで表示する）ので、ZStackのalignmentを設定し、左寄せにすれば良さそう！

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


List{
                        ForEach(0 ..< task.count) { id in
                            
                            Button(action: {})
                            {
                                ZStack(alignment: .leading){
                                    Rectangle().fill(.gray)
                                    Text("""
                                        上:\(self.task[id])
                                        下:テスト
                                        """)
                                }
                            }
                        }
                        Spacer()
                    }
                    .frame(width: 250, height: 350)
                    .listStyle(SidebarListStyle())