【SwiftUI】リスト内の文字列を左に寄せたかった
問題点
下のようなコードを書いて、リストを作成してみたんだけど・・・
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を設定し、左寄せにすれば良さそう!
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())
ZStack(alignment: .leading)に変更した。
すると以下のように表示されるようになった。
参考にしたサイト
【SwiftUI】テキストのAlignmentについて(左に寄せる方法)
[[SwiftUI] ZStackの配置、余白、背景色等の設定](https://swiftui.i-app-tec.com/ios/zstack.html)