List
はじめに
UIKitのUITableViewのように1行ずつのセルを子Viewで表示してスクロール可能なViewです。
SectionもUIKitのものより簡単に追加できます。
List
List<SelectionValue, Content>という構造体が用意されているのでListの中括弧の中にHStackでcell用のViewを作成していくと1つの塊がcellになります。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-22.53.24.png)
struct ContentView: View {
var body: some View {
List {
HStack {
Image(systemName: "heart.fill")
Text("heart")
}
HStack {
Image(systemName: "star")
Text("star")
}
}
}
}
section
Sectionのinitializeは以下の4種類が用意されています。
Section(content: )
Section(footer: , content: )
Section(header: , content: )
Section(header: , footer: , content: )
以下のようなコードでSection HeaderとFooterを追加すると画像のようにHeader,Footerが追加されます。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-23.08.07.png)
struct ContentView: View {
var body: some View {
List {
Section(header: Text("Header"), footer: Text("Footer")) {
HStack {
Image(systemName: "heart.fill")
Text("heart")
}
HStack {
Image(systemName: "star")
Text("star")
}
}
}
}
}