Swiftで行こう!--SwiftUIもっと!6
次は"List"です。表ですね。表の中身についてもどうするかということが必要です。では、表の中身から決めていきます。
struct RestaurantRow:View{
var name:String
var body: some View{
Text("Restaurant: \(name)")
}
}
表中の中身は変数nameを使ってテキストを入れ込む形になっています。
そして表ぐみです。具体的な表を作っていきます。
struct ContentView: View {
var body: some View {
List {
RestaurantRow(name: "Joe's Original")
RestaurantRow(name: "The Real Joe's Original")
RestaurantRow(name: "Original Joe's")
}
}
}
要するに、
List{}
を使います。これでリスト形式のレイアウトが構成されます。
こんな感じで表示されます。
UIKitの中のUITableViewで表現するべきところをListで表しています。かなりコードは簡素化されています。
次にデータを消去する方法です。
func delete(at offsets: IndexSet) {
if let first = offsets.first {
users.remove(at: first)
}
}
消去するメソッドです。
.onDelete(perform: delete)
のように使います。コード全体は
struct ContentView : View {
@State var users = ["Paul", "Taylor", "Adele"]
var body: some View {
NavigationView {
List {
ForEach(users,id: \.self){ user in
Text(user)
}
.onDelete(perform: delete)
}
}
}
func delete(at offsets: IndexSet) {
if let first = offsets.first {
users.remove(at: first)
}
}
}
になります。
そして、
.navigationBarItems(trailing: EditButton())
をつけることで、"Edit"ボタンが出現します。
ボタンを押すと削除ボタンが出てきます。
表の仕様ですが、Section()で仕切りをつけます。
struct TaskRow: View {
var body: some View {
Text("Task data goes here")
}
}
struct ContentView : View {
var body: some View {
List {
Section(header: Text("Important tasks")) {
TaskRow()
TaskRow()
TaskRow()
}
Section(header: Text("Other tasks")) {
TaskRow()
TaskRow()
TaskRow()
}
}
}
}
わかりにくいですが、グループする方法ですが
.listStyle(.grouped)
つけます。
struct ExampleRow: View {
var body: some View {
Text("Example Row")
}
}
struct ContentView : View {
var body: some View {
List {
Section(header: Text("Examples")) {
ExampleRow()
ExampleRow()
ExampleRow()
}
}.listStyle(.grouped)
}
}
こんな感じになります。
この記事が気に入ったらサポートをしてみませんか?