見出し画像

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)
   }
}

こんな感じになります。

この記事が気に入ったらサポートをしてみませんか?