【Swift UI】Pickerの書式と使い方とスタイル変更！配列や列挙型

@State  var selected = 0
Picker(selection: $selected, label: Text("ラベル")) {
    Text("選択肢1").tag(0)
    Text("選択肢2").tag(1)
    Text("選択肢3").tag(2)
}

struct ContentView: View {
    @State  var selected = 0 // 選択肢の初期値

    var body: some View {
        VStack {
            Picker(selection: $selected, label: Text("スポット")) {
                Text("水族館").tag(0)
                Text("図書館").tag(1)
                Text("遊園地").tag(2)
                Text("体育館").tag(3)
            }
            Text("選択したインデックス番号：\(selected)") // 選択したインデックス番号： 0
        }
    }
}

struct ContentView: View {
    @State  var selectedLang = 0
    let lang = ["HTML", "CSS", "PHP", "Swift", "C"]
    
    var body: some View {
      VStack {
        Picker(selection: $selectedLang, label: Text("language")) {

            ForEach(0..<lang.count) { index in
                Text(lang[index]) // .tagは不要になる
            }

        }
        Text("選択した値：\(lang[selectedLang])") // 選択した値： HTML
      }
    }
}

ForEach(0..<lang.count) { index in
  Text(lang[index])
}

ForEach(lang.indices, id:\.self) { index in
  Text(lang[index])
}

ForEach(lang, id: \.self) { item in 
  Text(item) 
}

struct ContentView: View {
    @State  var selectedLang = "HTML" // 初期値に文字列を指定する
    let lang = ["HTML", "CSS", "PHP", "Swift", "C"]
    
    var body: some View {
      VStack {
        Picker(selection: $selectedLang, label: Text("language")) {
            ForEach(lang, id:\.self) { item in
                Text(item)
            }
        }
        // selectedLangに選択された値が入る
        Text("選択した値：\(selectedLang)") // 選択した値： HTML
      }
    }
}

VStack {
  Text("スポット")
  Picker(selection: $selected, label: Text("スポット")) {
      Text("水族館").tag(0)
      Text("図書館").tag(1)
      Text("遊園地").tag(2)
      Text("体育館").tag(3)
  }
}

NavigationView{
    Picker(selection: $selectedLang, label: Text("language")) {
        ForEach(lang.indices, id:\.self) { index in
            Text(lang[index])
        }
    }.navigationTitle(Text("スポット"))
}

VStack{
  Section(header:Text("スポット").font(.headline)){
    Picker(selection: $selectedLang, label: Text("language")) {
        ForEach(lang.indices, id:\.self) { index in
          Text(lang[index])
        }
    }
  }
}

NavigationView{
  Form{
      Picker(selection: $selectedLang, label: Text("言語")) {
          ForEach(lang.indices, id:\.self) { index in
              Text(lang[index])
          }
      }
      
  }
}

Picker(selection: $selectedLang, label: Text("language")) {
  ForEach(lang.indices, id:\.self) { index in
    Text(lang[index])
  }
}.pickerStyle(SegmentedPickerStyle())

Picker(selection: $selectedLang, label: Text("language")) {
  ForEach(lang.indices, id:\.self) { index in
    Text(lang[index])
  }
}.pickerStyle(WheelPickerStyle())

// アイテムの高さ
func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    return 50
}

Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(lang.indices, id:\.self) { index in
        Text(lang[index])
    }
}.border(.orange) //  枠線
.background(.gray) // 背景色
.tint(.white)  // 文字色

Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(lang.indices, id:\.self) { index in
        Text(lang[index])
    }
}.overlay(
      RoundedRectangle(cornerRadius: 5)
          .stroke(.orange.opacity(0.4), lineWidth: 2)
)

enum Spot:String,Identifiable ,CaseIterable{
    var id:String{self.rawValue}
    
    case house      // 人の家
    case restaurant // 飲食店
    case workplace  // 仕事場
    case shop       // ショップ
    case facility   // 施設
    case leisure    // レジャー
    case nature     // 自然
    case parking    // 駐車場

}

print(Spot.allCases)
// [__lldb_expr_1.Spot.house, __lldb_expr_1.Spot.restaurant, __lldb_expr_1.Spot.workplace, __lldb_expr_1.Spot.shop, __lldb_expr_1.Spot.facility, __lldb_expr_1.Spot.leisure, __lldb_expr_1.Spot.nature, __lldb_expr_1.Spot.parking]

Picker(selection: $selectedSpot, label: Text("スポット")) {

      ForEach(Spot.allCases, id: \.self) { item in
          Text(item.rawValue)
      }

}