Viewの上にこれらのコントロール(UI部品)を配置してアプリを作成していきます. 今回は基本部品の一つListです.
環境は,
- macOS Catalina 10.15.7
- Xcode 12.0.1
- Swift 5.3
- iOS 14.0
です.
目次
Listとは
Listはデータを一列に並べて表示されることができます.
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()
}
}
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")
}
}
}
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)
}
}
}
}
ForEachと組合わせる
1つ上の例と似たようなことは, ForEachを使えば少ないコードで記述できます. (今回はScrollViewにのせてはいません)
テキストを入力してリストに追加していく
今回は保存機能は実装していないため, アプリを起動し直すとメモは消えてしまします. 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)
}
}
}
}
}
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)
}
}
}
}
}
EditButtonと組合わせる
1つ上のForEachのonDeleteメソッドを使ったコードにEditButton()を追加するだけです.
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)
}
}
}
}
}
リストをクリックすると画面遷移が行われる
最後に画面遷移です. 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)
}
}
Listの要素がたくさんある場合はForEachと合わせるほうがよさそうです.
Listは単体では表示だけですので, その他の部品と組合せてさまざまな動作を実装していきます.
コメント