SwiftUI入門-勉強メモ012-【List】

Viewの上にこれらのコントロール(UI部品)を配置してアプリを作成していきます. 今回は基本部品の一つListです.

環境は,

  • macOS Catalina 10.15.7
  • Xcode 12.0.1
  • Swift 5.3
  • iOS 14.0

です.

目次

Listとは

Listはデータを一列に並べて表示されることができます.

SwiftUI
Listの基本的なinitializer
init(content: () -> Content)
  • content: リストに表示する内容を記述します

Listの具体例

簡単な例

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        List {
        Text("A")
        Text("B")
        Text("C")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
SwiftUI
import SwiftUI

struct ContentView: View {
    
    var body: some View {
        List {
            HStack{
                Image(systemName: "checkmark.circle")
                    .foregroundColor(.green)
                Text("A")
            }
            HStack{
                Image(systemName: "circle")
                Text("B")
            }
        Text("C")
        }
    }
}
SwiftUI

ScrollViewと組合わせる

Viewは10個以上並べることができないため, Groupにしておきます.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ScrollView(.vertical) {
                VStack {
                    Group {
                        Text("A")
                        Text("B")
                        Text("C")
                        Text("D")
                        Text("E")
                        Text("F")
                        Text("G")
                        Text("H")
                        Text("I")
                        Text("J")
                    }
                    Group {
                        Text("K")
                        Text("L")
                        Text("M")
                        Text("N")
                        Text("O")
                        Text("P")
                        Text("Q")
                        Text("R")
                        Text("S")
                        Text("T")
                    }
                    Group {
                        Text("U")
                        Text("V")
                        Text("W")
                        Text("X")
                        Text("Y")
                        Text("Z")
                        Text("a")
                        Text("b")
                        Text("c")
                        Text("d")
                    }
                    Group {
                        Text("e")
                        Text("f")
                        Text("g")
                        Text("h")
                        Text("i")
                    }
                }.font(.largeTitle)
            }
        }
    }
}
SwiftUI

ForEachと組合わせる

1つ上の例と似たようなことは, ForEachを使えば少ないコードで記述できます. (今回はScrollViewにのせてはいません)

SwiftUI

テキストを入力してリストに追加していく

今回は保存機能は実装していないため, アプリを起動し直すとメモは消えてしまします. Core Dataで保存機能を持ったメモアプリは今後のブログで公開予定です.

テキストを保存するinputTextはStateでラップしています.

import SwiftUI

struct ContentView: View {
    @State private var inputText: String = ""
    @State private var inputTextList: [String] = []
    
    var body: some View {
        VStack {
            HStack{
                TextField("テキストを入力してください", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    self.inputTextList.append(self.inputText)
                    self.inputText = ""
                }){
                    Text("追加")
                }
            }.padding(.all)
            List {
                ForEach(inputTextList, id: \.self){ text in
                    Text(text)
                }
            }
        }
    }
}
SwiftUI

ForEachのonDeleteメソッドと組合わせる

ForEachのonDeleteメソッドを使えば, 登録したテキストをリストから削除することができます.

import SwiftUI

struct ContentView: View {
    @State private var inputText: String = ""
    @State private var inputTextList: [String] = []
    
    var body: some View {
        VStack {
            HStack{
                TextField("テキストを入力してください", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    self.inputTextList.append(self.inputText)
                    self.inputText = ""
                }){
                    Text("追加")
                }
            }.padding(.all)
            List {
                ForEach(inputTextList, id: \.self){ text in
                    Text(text)
                }
                .onDelete{ offset in
                    self.inputTextList.remove(atOffsets: offset)
                }
            }
        }
    }
}
SwiftUI
SwiftUI

EditButtonと組合わせる

1つ上のForEachのonDeleteメソッドを使ったコードにEditButton()を追加するだけです.

SwiftUI
SwiftUI
SwiftUI

ForEachのonMoveメソッドと組合わせる

ForEachのonMoveメソッドを使えば, リストをドラッグして並び替えることができるようになります.

import SwiftUI

struct ContentView: View {
    @State private var inputText: String = ""
    @State private var inputTextList: [String] = []
    
    var body: some View {
        VStack {
            HStack{
                TextField("テキストを入力してください", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    self.inputTextList.append(self.inputText)
                    self.inputText = ""
                }){
                    Text("追加")
                }
            }.padding(.all)
            EditButton()
            List {
                ForEach(inputTextList, id: \.self){ text in
                    Text(text)
                }
                .onMove{ indices, destination in
                    self.inputTextList.move(fromOffsets: indices, toOffset: destination)
                }
                .onDelete{ offset in
                    self.inputTextList.remove(atOffsets: offset)
                    
                }
            }
        }
    }
}
SwiftUI
SwiftUI

リストをクリックすると画面遷移が行われる

最後に画面遷移です. Listの中にあるTextをNavigationLinkで囲みます.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: SubView1()) {
                    Text("SubView1に移動")
                }
                NavigationLink(destination: SubView2()) {
                    Text("SubView2に移動")
                }
                NavigationLink(destination: SubView3()) {
                    Text("SubView2に移動")
                }
            }
            .navigationBarTitle("最初の画面")
        }
    }
}

struct SubView1: View {
    var body: some View {
        Text("SubView1に移動しました")
            .foregroundColor(.pink)
    }
}

struct SubView2: View {
    var body: some View {
        Text("SubView2に移動しました")
            .foregroundColor(.pink)
    }
}

struct SubView3: View {
    var body: some View {
        Text("SubView3に移動しました")
            .foregroundColor(.pink)
    }
}
SwiftUI
SwiftUI

Listの要素がたくさんある場合はForEachと合わせるほうがよさそうです.

Listは単体では表示だけですので, その他の部品と組合せてさまざまな動作を実装していきます.

よかったらシェアしてね!

コメント

コメントする

目次
閉じる