SwiftUIのチュートリアルを試す(List)

リストの基本は

 VStack {
            List { 
                Text("Elisha")
                Text("Andre")
                Text("Jasmine")
                Text("Po-Chun")
            }
        }

これを一括で表示できるようにします。まず表示したいもの変数に入れて

 @State private var names: [String] = ["Elisha", "Andre", "Jasmine", "Po-Chun"]

連続で読み出して表示させます。

List {
　　　ForEach(names, id: \.self) { name in
　　　　　　Text(name)
 }

追加する方法を付け加えます。

 @State private var nameToAdd = ""

付け加える時に入れる変数を作ります。

これを追加する方法は

TextField("Add Name", text: $nameToAdd)
                .onSubmit {
                    if !nameToAdd.isEmpty {
                        names.append(nameToAdd)
                        nameToAdd = ""
                    }
                }

全体は

import SwiftUI

struct ContentView: View {
    
   @State private var names: [String] = ["Elisha", "Andre", "Jasmine", "Po-Chun"]
   @State private var nameToAdd = ""

    var body: some View {
        VStack {
            List { 
                ForEach(names, id: \.self) { name in
                    Text(name)
                }
            }
            TextField("Add Name", text: $nameToAdd)
                .onSubmit {
                    names.append(nameToAdd)
                    nameToAdd = ""
                }
        }
         .padding()
    }
}

.autocorrectionDisabled()

これは自動修正のモディファイア。特に機能的に影響するものではない。

次にリストからランダムにデータを取り出し、上部に表示できるようにします。

取り出す名前を入れるる変数の追加。

 @State private var pickedName = ""

ランダムに表示すぬ場所を一番上に追加

Text(pickedName.isEmpty ? " " : pickedName)

そしてその追加するタイミングはボタンを押した時にしたいので

     Button("Pick Random Name") {

                if let randomName = names.randomElement() {

                    pickedName = randomName

                } else {

                    pickedName = ""

                }

            }

次にこの取り出した名前のデータを削除していく仕組みを作ります。このタイミングは選択した時に、削除可能なトグルボタンであれば、ランダムに選ばれたものが削除されるようにします。

まず削除可能かどうかを変数に真偽値(true,false)を入れるための変数を用意します。

@State private var shouldRemovePickedName = false

トグルボタンは

 Toggle("Remove picked names", isOn: $shouldRemovePickedName)

これをボタンを押すタイミングで実行するために

Button("Pick Random Name") {
　　if let randomName = names.randomElement() {
　　　pickedName = randomName
　　　　if shouldRemovePickedName {
　　　　　names.removeAll { name in
　　　　　return (name == randomName)
　　　　}
　　}
}

として削除して行きます。

テキストフィールドの"Add Name"に文字を入力しリターンするとリストに追加されます。

"Pick Random Name"を押すことでリストの内容がランダムに選ばれて、リストの上部に名前が表示されます。

"Remove picked names"のトグルスイッチを有効にして"Pick Random Name"を押すと、リストからランダムに選ばれたリストの要素が削除されることになります。

デザイン的なところの変更します。ボタンのラベルを別指定して修飾します。

  Button{  
                if let randomName = names.randomElement() {    
                    pickedName = randomName  
                    if shouldRemovePickedName {      
                        names.removeAll { name in                  
                            return (name == randomName)               
                        }          
                    }    
                } else {        
                    pickedName = ""      
                } 
            }label: {
                Text("Pick Random Name") 
                    .padding(.vertical, 8)     
                    .padding(.horizontal, 16)             
            }
            .buttonStyle(.borderedProminent)
            .font(.title2)

label: {
　　Text("Pick Random Name")
　　　　.padding(.vertical, 8)
　　　　.padding(.horizontal, 16)
}
　.buttonStyle(.borderedProminent)
　.font(.title2)

あとは一番上に

    VStack(spacing: 8) {            
                Image(systemName: "person.3.sequence.fill") 
                    .foregroundStyle(.tint)    
            }
            .font(.title)
            .bold()

をつけてやればチュートリアル通りのレイアウトとなります。

全体は

import SwiftUI

struct ContentView: View {
    
     @State private var names: [String] = ["Elisha", "Andre", "Jasmine", "Po-Chun"]
     @State private var nameToAdd = ""
     @State private var pickedName = ""
     @State private var shouldRemovePickedName = false
    
    var body: some View {
        VStack {   
            VStack(spacing: 8) {            
                Image(systemName: "person.3.sequence.fill") 
                    .foregroundStyle(.tint)    
            }
            .font(.title)
            .bold()
            
            Text(pickedName.isEmpty ? " " : pickedName)
            
            List { 
                ForEach(names, id: \.self) { name in
                    Text(name)
                }
            }
            .clipShape(RoundedRectangle(cornerRadius: 8))
            TextField("Add Name", text: $nameToAdd)
                .autocorrectionDisabled()
                .onSubmit {
                    names.append(nameToAdd)
                    nameToAdd = ""
                }
            Toggle("Remove picked names", isOn: $shouldRemovePickedName)
            Button{  
                if let randomName = names.randomElement() {    
                    pickedName = randomName  
                    if shouldRemovePickedName {      
                        names.removeAll { name in                  
                            return (name == randomName)               
                        }          
                    }    
                } else {        
                    pickedName = ""      
                } 
            }label: {
                Text("Pick Random Name") 
                    .padding(.vertical, 8)     
                    .padding(.horizontal, 16)             
            }
            .buttonStyle(.borderedProminent)
            .font(.title2)
        }
         .padding()
    }
}